The principle of the flex box layout
controls the position and arrangement of the child boxes by adding flex attributes to the parent box
Flexible layout Any container can specify the flex layout.
When the parent box is set to the flexlayout, the float clearsum vertical-alignattribute of the child elements will be invalid.
Extensible layout = flexible layout = flexible box layout = flexible box layout = flex layout
1. Compatibility
Support status of each browser
Processing compatible ...
.box{
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
2. Common attributes of parent
flex-direction:Set the direction of the
justify-content:main axis Set the arrangement of the child elements on the main axis
flex-wrap:Set whether the child elements wrap or not
align-content:Set the arrangement of the child elements on the side axis (multi-line)
align-items:Set the arrangement of the child elements on the side axis (single line) The
flex-flow:composite attribute is equivalent to setting flex-direction and flex-wrap
Set the direction of the main axis (main axis and side axis: default row and column x-axis and y-axis)
flex-direction:row; /* 默认主轴是x 这个一般不写 */
flex-direction:row-reverse; /* 翻转 从右至左 */
flex-direction:column; /* 设置主轴为y 从上到下 */
flex-direction:column-reverse; /* 从下到上 */
Set the arrangement of child elements on the main axis
justify-content:flex-start; /* 默认 从头部开始 */
justify-content:flex-end; /* 从尾部开始排列 */
justify-content:center; /* 在主轴居中对齐 */
justify-content:space-around; /* 平分剩余空间 */
justify-content:space-between; /* 两边贴边 再分配剩余空间 */
Set whether the child element wraps (the default child element in the flex layout is not wrapped, if it is not enough, it will reduce the width of the child element)
flex-wrap:nowrap; /* 默认 不换行 */
flex-wrap:wrap; /* 换行 */
Set the arrangement of the child elements on the side axis (multiple lines and one line has no effect)
align-content:flex-start; /* 默认值 从侧轴头部开始排列 */
align-content:flex-end; /* 从侧轴尾部开始排列 */
align-content:center; /* 在侧轴中间显示 */
align-content:space-around; /* 子项在侧轴平分剩余空间 */
align-content:space-between; /* 子项在侧轴先分布在两头 再平分剩余空间 */
align-content:stretch; /* 设置子项元素高度平分父元素高度 */
Set the arrangement of child elements on the side axis (single line)
align-items:flex-start; /* 默认值 从上到下 */
align-items:flex-end; /* 从下到上 */
align-items:center; /* 挤在一起居中(垂直居中) */
align-items:stretch; /* 拉伸 */
Compound attributes (equivalent to setting flex-direction and flex-wrap at the same time)
flex-flow:column wrap; /* 设置主轴为y 并且换行 */
重点 搞清楚主轴是哪个
3. Common attributes of subitems
flexThe number of shares occupied by the sub-item defines the remaining space allocated by the sub-item.
align-selfControl the arrangement of the sub-item itself on the side axis. The
orderattribute defines the order of the sub-item (front and rear order)
The number of children
flex:number; /* number填数字 默认是0 */
Control how the children themselves are arranged on the side axis
align-self:flex-end;
Attributes define the order of sub-items (front-to-back order)
order:-1; /* 默认是 0 数值越小 越靠前 */
