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-direction
与 flex-wrap
属性的复合写法
son {flex-flow: row wrap;}
flex 布局子盒子常见属性
flex
flex
属性其实是 flex-grow
、flex-shrink
、flex-basis
三个属性的简写。
flex-grow
属性值为一个数字,用于设置弹性盒子的扩展比例,即盒子占剩余空间的份数,默认为 0。常见的 flex: 1
是 flex-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;}