flex 布局原理

全称 flexible box,弹性布局。

如何开启:为元素添加 display: flex

开启 flex 布局的元素,称为 flex 容器(flex container),其子元素成为容器成员,称为 flex 项目。

flex 布局原理:通过给父盒子添加 display: flex,来控制盒子的位置和排列方式。

flex 布局父盒子常见属性

flex-direction

设置主轴方向

属性值含义
row默认值,从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上

justify-content

设置主轴子元素排列方式

属性值含义
flex-start默认值,从头开始
flex-end从尾部开始
center居中
space-around平分剩余空间
space-between两侧子元素贴边,再平分剩余空间

flex-wrap

设置子元素是否换行

默认不换行,若子盒子宽度和大于父盒子,则会收缩!

属性值含义
wrap换行
nowrap默认值,不换行

align-items

设置子元素在侧轴上的排列方式(子元素单行)

属性值含义
flex-start侧轴头部开始
flex-end侧轴尾部开始
center侧轴居中
stretch默认值,拉伸(拉满整个侧轴),若子元素设置了高度则失效

align-content

设置子元素在侧轴上的排列方式(子元素多行)

属性值含义
flex-start默认值,侧轴头部开始
flex-end侧轴尾部开始
center侧轴居中
stretch子元素高度平分父元素高度(需要子元素没有设置高度)
space-around平分侧轴空间
space-between侧轴两侧贴边再平分剩余空间

flex-flow

flex-directionflex-wrap 属性的复合写法

son {flex-flow: row wrap;}

flex 布局子盒子常见属性

flex

flex 属性其实是 flex-growflex-shrinkflex-basis 三个属性的简写。

flex-grow 属性值为一个数字,用于设置弹性盒子的扩展比例,即盒子占剩余空间的份数,默认为 0。常见的 flex: 1flex-grow 为 1。

flex-shrink 属性值为一个数字,用于设置盒子的收缩比例,当子盒子的宽度之和大于父盒子时才会收缩。

flex-basis 用于设置子盒子的初始长度。

span {flex: 1;}.son {flex: 0 0 33.33%;}

align-self

单独设置某个子盒子在侧轴的排列方式,它会覆盖 align-items 属性。默认值为 auto,表示继承父盒子的 align-items 属性,其余属性值与 align-items 相同。

order

定义子盒子在主轴上的排列顺序。默认值为 0,值越小越靠前,可以为负数。

.son {order: -3;}