flexbox是什么
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
抛开浏览器兼容性,对于移动端h5开发,简直是布局的神兵利器
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
属性列表
关于flex布局,有12个属性, 其中6个设置在容器上,6个设置在项目上。
设置在容器上的属性
- justify-content – 将flex元素和主轴对齐
- flex-direction – 定义主轴方向
- flex-wrap – flex元素必须单行或者自动换行
- flex-flow – flex-direction和flex-wrap的缩写
- align-items – 将flex元素在交叉轴上对齐
- align-content – 当交叉轴有多余空间时,对齐容器内的轴线
设置在项目上的属性
- order – 决定flex元素的顺序
- align-self – 自身对齐交叉轴,覆盖父元素设置的align-items
- flex-grow –定义项目的放大比例,