A brief discussion on the use of css3 box box model and box-flex_html/css_WEB-ITnose

display:box;box-flex is a newly added box model attribute of CSS3. Its appearance can solve the layout method we implement through N-multi structures and CSS. A classic layout application is the vertical equal height, horizontal division, and proportional division of the layout.

1. Use and introduction:

1. To achieve horizontal or vertical segmentation, the following requirements must be met

i. display: box must be used in the corresponding parent window, such as div.parent>div.panel*3, parent must first define this attribute

ii. .panel element Define box-flex to achieve proportional segmentation. As shown below: three divs are divided into 6 parts horizontally

.parent{display:box or -moz-box or -wekit-box}.panel1{box-flex : 1};.panel2{box-flex : 2};.panel3{box-flex : 3};

above What is listed is a simple example. On this basis, if we want to lay out vertically, theoretically according to our current layout, it is div.panel1 div.panel2 div.panel3. This method is also possible, but today we consider box, so box is used below to implement this

2. Vertical layout involves another attribute: box-orient (on the parent element): This attribute There are the following values ​​

horizontal //水平vertical // 垂直inline-axis //也算是水平block-axis//也算是垂直，跟垂直没有什么区别inherit // 水平，垂直

p.s : 当设置了水平(horizontal)或者 inline-axis 的话，如果父容器设置了高度，子容器的高度会跟父容器保持一致（即时子容器设置了高度也无效）。如果父容器不设置高度值，其子容器的高度值才有效并且取最大高度值的子容器的高度。同理，如果设置了垂直(vertical) or block-axis 父容器设置了宽度的话，子容器设置宽度会无效。如果父容器不设置宽度值，其子容器的宽度值才有效并且取最大宽度值的子容器的宽度

Now there is no problem with horizontal typesetting and vertical typesetting, but sometimes I want to achieve a concave and convex horizontal layout (such as: protruding a in the middle, b, c rising on both sides) or concave and convex vertical layout. In this case, how should I do it? If you need this, of course you cannot use the box-orient mentioned above. In this case, the width and height inside the box can be different

Then can we achieve vertical alignment and horizontal alignment of bc module and a module? Woolen cloth?

3. Then we can use this attribute: box-align (used on the parent element): It has the following attribute values ​​

start  // 理解为valign = top 以顶部对齐, 、end  //理解为  valign = bottom 以底部对齐center // 理解为  valign = center 以居中对齐baseline //理解为以某一个元素的基准线进行对齐，stretch(默认值)  //以最大的一块的高度或者宽度拉伸,以哪个方位进行拉伸取决于你是水平对齐还是垂直对齐,如果子容器没有定义高度则以父容器的宽度或者高度拉伸

p.s 当父容器有宽度高度的时候     1、如果是水平切分，设置box-align的值不等于stretch(拉伸)的时候，内容的子容器的高度不再是父容器的高度，而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候，子容器的高度变成自身的高度     2、如果是水平切分，设置box-align的值不等于stretch(拉伸)的时候，内容的子容器的高度不再是父容器的高度，而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候，子容器的高度变成自身的高度

4 , box-pack represents the horizontal alignment of the sub-container in the parent container. The optional parameters are as follows. The prerequisite for this parameter to take effect is: The total length of the sub-container < The width of the parent container, this setting can take effect Effective (the result of the demo written by myself)

start 代表向左对齐end 代表向右对齐，类似与float:rightcenter 居中对齐， 类似div.设定了宽度，然后margin: 0 autojustify : 就是自适应撑开到父容器的宽度

2. Summary of common problems

1. To achieve a fixed width of a certain area, how is this layout laid out and what is the result, as shown in the following demo

.parent{display:box or -moz-box or -wekit-box}.panel1{box-flex : 1};.panel2{box-flex : 2;width:200px};.panel3{box-flex : 3};

If it is written like this (if there is both proportional distinction and precise width, the proportion is invalid). At this time, the middle piece will always be 200px, and the two pieces on both sides will be -200px according to the width of the parent container. When doing proportional segmentation, this also meets our requirements.