CSS flex 弹性布局

传统的布局中,使用 display属性 +position属性 +float属性。大部分的布局都能容易的解决,只是有些就很不方便。 比如,让最后一个 div 占满剩余空间、元素垂直居中。flex是 css3 才有的样式。

display: flex;

flex 简称"容器",不能被继承。设为 Flex 以后,所有子元素自动成为容器成员,简称"项目"。 项目的 float、clear 和 vertical-align 属性也无效。

容器默认存在两根轴:水平的主轴和垂直的交叉轴。当项目在水平排列为一排,则为一条主轴。当项目在水平 排列为两排,则为多条主轴。

flex 布局的相关属性:

属性 描述
设置在容器上
flex-direction 决定项目的排列方向
flex-wrap 决定怎么换行
flex-flow flex-direction 和 flex-wrap 的简写
justify-content 定义项目在主轴方向(水平)的对齐方式
align-items 决定项目在交叉轴(垂直)的对齐方式
align-content 定义多根轴线的对齐方式
设置在项目上
order 定义项目的排列顺序
align-self 让单个项目有与其他项目不一样的对齐方式
flex-grow 定义项目的放大比例
flex-shrink 定义项目的缩小比例
flex-basis 设置项目的基准值
flex flex-grow、flex-shrink 和 flex-basis 的简写