flex布局

目录

一、概念

1.适用范围

二、容器属性

1. flex-direction

2.flex-wrap属性

3.flex-flow属性

4.justify-content属性

5.align-items属性

---

一、概念

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

1.适用范围

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

2）行内元素也可以使用Flex布局。

3）webkit内核的浏览器，必须加上-webkit前缀。

二、容器属性

1. flex-direction

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

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

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

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

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

2.flex-wrap属性

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

nowrap：表示不换行

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

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

3.flex-flow属性

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

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

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

4.justify-content属性

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

flex-start：默认值，左对齐

flex-end：右对齐

center：居中对齐

space-between：两端对齐

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

5.align-items属性

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

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

flex-end 交叉轴的终点对齐

center 交叉轴居中对齐

baseline 项目的第一行文字的基线对齐