Flex布局

flex概述
简介

flexbox（Flexible Box）是一种一维的布局模型，它给 flexbox 的子元素提供了强大的空间分布和对齐能力。

flexbox 是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局（一行或者一列）。相对而言，Grid 布局是一个二维布局，可以同时处理行和列上的布局。

设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

基本概念

flex布局，涉及到里外两层。外面一层叫做Flex容器（flex container），简称”容器”。容器里的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直于它的交叉轴(cross axis)。（这是默认设置，可以设置使垂直方向变为主轴，水平方向变为交叉轴）。

每个flex项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

容器的属性

flex 布局需要先指定一个容器，任何一个容器都可以被指定为 flex 布局，这样容器内部的元素就可以使用 flex 来进行布局。

生成一个块状或行内的 flex 容器盒子。（如果使用块元素如 div，用 flex；如果使用行内元素，使用 inline-flex。）

有下面六种属性可以设置在容器上，它们分别是：

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

1. flex-direction
flex-direction：决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;
四个值分别代表：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2. flex-wrap

flex-wrap：定义如果一条轴线排不下，如何换行。有三个属性值，默认情况下是wrap。

flex-wrap: nowrap | wrap-reverse | wrap;

分别表示：不换行 | 反转换行 | 换行

3. flex-flow
flex-flow：flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。这里就不再具体测试。

4. justify-content
justify-content：定义项目在主轴上（即相当于X轴）的对齐方式。一共有五个属性值：

justify-content: flex-start | flex-end | center | space-between | space-around;
分别表示：左对齐 | 右对齐 | 居中 | 两端对齐 | 每个项目两侧的间隔相等

5. align-items
align-items：定义项目在交叉轴上（即Y轴上）如何对齐。有五个属性值：

align-items: flex-start | flex-end | center | baseline | stretch;
分表表示：上对齐 | 下对齐 | 居中对齐 | 项目的第一行文字的基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度（默认值

6. align-content
align-content：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。该属性定义多跟轴线在Y轴上的对齐方式，与align-items有点类似。其有以下六个属性值：

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。