Flex弹性布局

什么是Flex布局

Flex是Flexible Box的缩写 flex布局表示弹性布局，可以为盒状模型提供最大的灵活性。

适用范围

任何一种元素都可以指定为flex布局

Flex容器的一些属性

有六个常用属性设置在容器上，分别为：

• flex-direction
• flex-wrap
• flew-flow
• justify-content
• align-items
• align-content

flex-direction 属性

flex-direction 属性设置容器主轴的方向

包含四个属性值：

row: 默认值，表示沿水平方向，由左到右。

row-reverse ：表示沿水平方向，由右到左

column：表示垂直方向，由上到下

column-reverse:表示垂直方向，由下到上

flex-wrap属性

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理。

包含三个属性值：

nowrap：表示不换行

说明：设置的项目的宽度就失效了，强行在一行显示

wrap：正常换行，第一个位于第一行的第一个

长度满足则换行显示

wrap-reverse：向上换行，第一行位于下方

flex-flow属性

flex-flow属性是flex-deriction和flex-wrap属性的简写，默认值为[row nowrap];,

第一个属性值为flex-direction的属性值

第二个属性值为flex-wrap的属性值

justify-content 属性

justify-content属性用于设置项目在容器中的对齐方式。

该属性主要要五个属性值：

flex-start：默认值，左对齐

flex-end：右对齐

center：居中对齐

space-between：两端对齐

space-around：每个项目两侧的间距相等

align-items 属性

align-items定义了项目在交叉轴上是如何对齐显示的

center 交叉轴居中对齐

flex-start:交叉轴的起点对齐

flex-end 交叉轴的终点对齐