Flex

6 Flex

一、Flex布局是什么？

在之前我们的布局方式：display+position+float，这种方式布局基本可以解决所有的布局问题，但是一些特殊的布局实现起来却不容易，比如垂直方向居中.

Flex，弹性布局。用来为盒子模型提供最大的灵活性.

所有元素都可以设置为flex布局

注意：如果使用了flex布局，所有的子元素float、clear、vertial-align等属性将失效

二、容器的属性

只需要一个元素设置为flex布局，该元素我们称为flex容器，他所在的所有子元素将成为容器成员，也成为flex项目

说白就是，一个大的div，嵌套两个小的div，如果大的div设置了flex布局；

那么：大的div就叫容器，2个小的div就叫项目

2.1 flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。

 

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

 

 

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

（1）nowrap（默认）：不换行。

 

（2）wrap：换行，第一行在上方。

 

（3）wrap-reverse：换行，第一行在下方。

 

2.2 flex-wrap

2.3 flex-flow

 

2.4 justify-content必须记住

 justify-content属性定义了项目在主轴上的对齐方式

就是设置水平方向对其方式（和Word水平对齐方式一样）

 

2.5 align-item必需记住

justify-content属性定义了项目在主轴上的对齐方式。

 

 

2.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。