An example introduction to the box-flex flexible box attribute layout in CSS3

Flex layout is undoubtedly the most powerful layout method for today's Web pages, and the box-flex flexible box model is one of its representatives. Here we will explain the box-flex flexible box model layout in CSS3 with an example

box-flex is a newly added box model attribute in CSS3. Its appearance breaks the floating layout we often use and achieves vertical equal height, horizontal division, and proportional division. But it has certain limitations. In Firefox and Chrome browsers, they need to be defined using their private attributes: Firefox (-moz), Chrome (-webkit).

1. The box-flex attribute
box-flex mainly allows the child container to be divided according to certain rules according to the width of the parent container.

<p class="box">   
 <p class="col_1">111</p>   
 <p class="col_2">222</p>   
 <p class="col_3">333</p>   
</p>   
<style type="text/css">   
.box {   
 display:box;   
 display:-webkit-box;   
 display:-moz-box;   
 background-color:#fff;   
 width:500px;   
 height:100px;   
 border:1px solid #333;   
 margin:0 auto;   
}   
.col_1 {   
 box-flex:1;   
 -moz-box-flex:1;   
 -webkit-box-flex:1;   
 background-color:#ffc;   
}   
.col_2 {   
 background-color:#ccf;   
 box-flex:2;   
 -moz-box-flex:2;   
 -webkit-box-flex:2;   
}   
.col_3 {   
 background-color:#fcf;   
 box-flex:2;   
 -moz-box-flex:2;   
 -webkit-box-flex:2;   
}   
</style>

Note:
The parent container must be defined as display:box, and its child containers can be divided (if display:box is set Then the container is an inline element, and using margin:0 auto to center it is invalid under Firefox. It needs to be controlled through the text-align:center; of the parent container, but it is possible under Chrome)
As mentioned above. In the example, the three sub-blocks are set to 1, 2, and 2 respectively, which means that the parent container is divided into 5 parts, occupying 1/5 (100px), 2/5 (200px), and 2/5 of the width of the parent structure respectively. (200px).
The above is divided according to the proportion. If one or more sub-containers have a fixed width set and other sub-containers have not been set, then the width is calculated according to the width, and the remaining parts are calculated according to the above method. calculate.

.col_3 {   
 background-color:#fcf;   
 width:50px;/*设置宽度为50px*/
}

When there is a gap in the sub-container, the width of their equal parts needs to be subtracted from the middle margin, and then divided equally in proportion.

.col_2 {   
 background-color:#ccf;   
 box-flex:2;   
 -moz-box-flex:2;   
 -webkit-box-flex:2;   
 margin:0 20px;   
}

##2. Box attribute
What is mentioned above Let’s talk about how box-flex divides the width of the parent container. Now let’s talk about what the box attributes in the parent container include. box-orient, box-direction, box-align, box-pack, box-lines

1. box-orient
box-orient is used to determine the child container in the parent container Whether the arrangement is horizontal or vertical, the optional attributes are as follows: horizontal | vertical | inline-axis | block-axis | inherit
The horizontal and inline-axis properties have the same effect, and they can arrange the containers horizontally. Horizontally arranged styles are also rendered by default. When the parent container sets the height, the height of its child container is invalid under firefox, but valid under chroma.

.col_1 {   
 height:50px;   
}   
.col_2 {   
 height:80px;   
}

If your container does not set a height, the height value of the sub-container will only take effect. Under Firefox, their heights will be the maximum value. The height of the child container under chrome is set to its own height. If it is not set, its height is the same as the maximum height. In fact, it is the same height as the parent container.

.box {   
 /*未设置高度*/
}   
.col_1 {   
 height:50px;   
}   
.col_2 {   
 height:80px;   
}   
.col_3 {   
 /*未设置高度*/
}

The vertical and block-axis attributes have the same effect, and they can arrange sub-containers vertically. They allocate the height of the parent container. If the width of the sub-container is set, it is also valid under Google and invalid under Firefox. Others are consistent with horizontal performance.

2、box-direction
box-direction用来确定父容器里面的子容器排列顺序，具有以下属性：
normal | reverse | inherit
normal是默认值，如上面测试结果。
reverse表示反转，其表现方式跟normal相反，呈现为3、2、1

3、box-align
box-align表示父容器里面子容器的垂直对齐方式，属性值为：
start | end | center | baseline | stretch
start、baseline展示效果

end展示效果

center展示效果

stretch展示效果，（谷歌下面如start）

4、box-pack
box-pack表示父容器里面子容器的水平对齐方式，可选参数如下所示：
start | end | center | justify
css代码

.box {   
 display:box;   
 display:-webkit-box;   
 display:-moz-box;   
 background-color:#fff;   
 width:500px;   
 border:1px solid #333;   
 margin:0 auto;   
 height:100px;   
 -webkit-box-pack:start;   
 -moz-box-pack:start;   
 box-pack:start;   
}   
.col_1,.col_2,.col_3{   
 width:100px;   
}

start：在box-pack表示水平居左对齐，如下所示：

end：在box-pack表示水平居右对齐，如下图所示

center：在box-pack表示水平居中对齐，如下图所示

justify：在box-pack表示两边对齐试

The above is the detailed content of An example introduction to the box-flex flexible box attribute layout in CSS3. For more information, please follow other related articles on the PHP Chinese website!