# 一、Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。

```
.box{
  display: flex;
}
```
###### 行内元素也可以使用 Flex 布局。

```
.box{
  display: inline-flex;
}
```
###### Webkit 内核的浏览器,必须加上-webkit前缀。

```
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
```
##### 注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
# 二、基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

![image][tmp]

[tmp]:data:image/png;base64,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

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。

# 三、容器的属性
##### 以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content

### 3.1 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。

```
.box {
  flex-direction: row | row-reverse | column | column-reverse;
}
```
![image][tmp2]

[tmp2]:data:image/png;base64,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

它可能有4个值。

- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。

### 3.2 flex-wrap属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行。

![image][tmp3]

[tmp3]:data:image/png;base64,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

 

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐