Flex是Flexible box的缩写,意味“弹性布局”,用来为盒模型提供最大的灵活。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis).
flex有6个属性:分别是:
- flex-direction 属性决定主轴的方向(即项目的排列方向)
- justify-content 属性 定义了项目在主轴上的对齐方式
- align-items 属性定义了项目在交叉轴上的对齐方式
- flex-wrap
flex-flow 属性 是flex-direction和 flex-wrap的简写,默认值为row no-wrap
align-content 属性 定义了多根轴线的对齐方式,如果项目只有一根轴线,不起作用。
最常用的三个属性:
flex-direction 属性 决定主轴的方向
有以下几个值
- row 主轴为水平方向,起点在左端
- row-reverse 主轴在水平方向,起点在右端
- column 主轴在垂直方向,起点在上沿
column-reverse 主轴为垂直方向,起点在下沿
justify-content属性 从主轴横向排列 定义了项目在主轴上的对齐方式
有以下几个值:flex-start:从起点开始,从左向右排列
- flex-end:从终点开始,从右向左排列
- center:居中
- space-between:两端对齐,中间间隔相等
- space-around:两端的间隔是中间元素间隔的一半
align-items 属性为垂直排列 在交叉轴上的对齐方式
有以下几个值:
- flex-start: 从上自下排列(交叉轴的起点对齐)
- flex-end:从下自上排列(交叉轴的终点对齐)
- center:居中(交叉轴的中点对齐)
- baseline:项目第一行文字的基线对齐
- stretch:如果项目未设置高度或者auto,将占满整个容器的高度。