Introduction to the properties of flex on the box container

This article brings you an introduction to the properties of flex on the box container. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. flex-direction

is used to specify the direction of the flex main axis, and then determine the position of the flex items in the flex container

row，默认值，表示水平方向从左到右排列,此时水平方向为主轴
row-reverse,与row相反
column, 表示竖直方向从上到下排列，此时垂直方向为主轴方向
column-reverse,与column相反

2 . flex-wrap

is used to specify whether the flex items should wrap

nowrap,默认值，表示不换行，flex子项可能会溢出
wrap，表示换行，溢出的flex子项会被换到下一行
wrap-reverse,表示反方向换行

3. flex-flow

is equivalent to flex-direction Combined writing method with flex-wrap

4. justify-content

is used to align flex items in the horizontal direction

flex-start,默认值，表示与行的起始位置对齐
flex-end,表示与行的末尾位置对齐
center，表示与行中间对齐
space-between，表示两端对齐，中间间距相等，注意特殊情况，当剩余空间为负数或者只有一个项时，效果和flex-start相同
space-around，表示间距相等，中间间距是两端的两倍，注意特殊情况，当剩余空间为负数或只有一个项时，效果等同于center

5. align-items

For alignment of vertical flex items

stretch,默认值，当flex子项未设置高度或者高度为auto时，stretch起作用将flex子项高度设置为行高度，在只有一行的情况下，行的高度为容器的高度
flex-start,表示与侧轴开始位置对齐
flex-end,表示与侧轴末尾位置对齐
center，表示与侧轴中间对齐

6. align-content

This attribute When it is only applied to multiple lines, it is used for the alignment of multiple lines.

stretch,默认值，当flex子项未设置高度或者高度为auto时，stretch起作用将flex子项高度设置为行高度，在只有一行的情况下，行的高度为容器的高度
flex-start,表示与侧轴开始位置对齐,紧靠侧轴开始位置，之后的每一行都紧靠前面一行
flex-end,表示与侧轴末尾位置对齐,紧靠侧轴结束位置，之后的每一行都紧靠前面一行
center，表示各行与侧轴中间对齐
space-between,表示两端对齐，中间间距相等，当剩余空间为负数或者只有一个项时，效果和flex-start相同
space-around，表示间距相等，中间间距是两端的两倍，注意特殊情况，当剩余空间为负数或只有一个项时，效果等同于center

== When this attribute is made to be used for multiple lines, it is invalid on a container with only one line. This attribute can Very good at handling the spacing between adjacent rows after air change==

This article has ended here. For more other exciting content, you can pay attention to the CSS3 video tutorial on the PHP Chinese website Column!

The above is the detailed content of Introduction to the properties of flex on the box container. For more information, please follow other related articles on the PHP Chinese website!