2018-10-01flex布局学习

flex布局是什么

---

Flex是Flexible Box的缩写，翻译为“弹性布局”。它决定了元素如何在页面中排列，在不同的屏幕尺寸和设备下可以很好的展现。和传统的布局相比，该布局拥有很大的灵活性。

了解flex布局的三个核心概念

---

1.flex容器。顾名思义就是采用flex布局的一个组件。

2.flex项。就是需要放在容器中的元素咯。

3.排列方式。即flex项在flex容器中怎样摆放，决定了flex项的布局方向，称之为主轴。

啥时候使用该布局，啥时候不用

---

1.任何一个容器都可以使用flex布局。使用方法如下：

定义一个容器，使用display：flex属性即可

默认情况下flex项从左到右排列为一行

2.整体页面布局时不建议使用该布局。

flex容器六大属性

---

1.flex-direction：决定主轴的方向，即flex项的排列方式

可取值： 

row（默认值）：flex项从左到右排列。（此例如上默认情况）

row-reverse：flex项从右往左排列。

flex项从右至左排列

column：flex项从上到下排列。

flex项排从上到下排成一列

column-reverse：flex项从下到上排列。

flex项从下到上排成一列

2.flex-wrap：决定flex项一条轴线排不下时如何换行

可取值：

nowrap（默认）：不换行。

与下图做对比。

对比两图发现当flex项宽度大于容器宽度时，它不换行，只是按比例缩小flex项宽度，直至适应flex容器宽度

wrap：换行。第一行在上面。

wrap-reverse：换行，第一行在下面。

3.flex-flow：该属性是flex-direction与flex-wrap的简写形式。默认row nowrap。

row nowrap（默认值）：

flex项从左到右排列且不换行，而是缩小比例。

row  wrap：

flex项从左到右排列，且换行时第一行在上面

row wrap-reverse：

flex项从左到右排列，且换行时第一行在下面

row-reverse nowrap：

flex项从右向左排列且不换行，而是缩小比例

row-reverse wrap：

flex项从右到左排列，换行且第一行在上面

row-reverse wrap-reverse：

flex项从右到左排列，换行且第一行在下面

column nowrap：

column wrap：

column wrap-reverse：

column-reverse nowrap：

column-reverse wrap：

column-reverse wrap-reverse：

4.justify-content：定义flex项在主轴上的对齐方式。

可取值：

flex-start（默认值）：左对齐。

flex项左对齐排列

flex-end：右对齐。

flex项右对齐排列

center：居中。

flex项在容器中居中显示

space-between：两端对齐，flex项之间的间隔相等。

仅flex项之间有间隔，且间隔相等

space-around：每个flex项之间的间隔相等。

每个flex项的两端都有间隔，且左右间隔相等。所以存在flex项之间的间隔比flex项与边框的间隔大一倍的情况。

5.align-items：定义flex项在交叉轴上如何对齐

可取值：

stretch（默认值）：如果flex项未设置高度或设为auto，将占满整个容器的高度。

flex项未设置高度，但是会充满容器的高度。

flex-start：交叉轴的起点对齐。

默认主轴方向为从左到右，则交叉轴为从上到下，交叉轴的起点即最上方。

主轴方向定义为从上到下，则交叉轴为从左到右，交叉轴的起点则为最左边。

flex-end：交叉轴的终点对齐。

默认主轴从左到右，交叉轴从上到下，所以交叉轴终点在最下边。

center：交叉轴的中点对齐。

利用此属性可设置组件在容器中垂直居中。

baseline：flex项的第一行文字的基线对齐。

6.align-content：定义了多根轴线的对齐方式，如果只有一根轴线时不起作用。

可取值：

flex-start：与交叉轴的起点对齐。

默认情况。交叉轴为从上到下。

flex-end：与交叉轴的终点对齐。

默认情况，交叉轴为从上到下。

center：与交叉轴的中点对齐。

此属性可设置组件垂直居中。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

与交叉轴两端对齐。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

给容器加背景色更容器看出来。

stretch：轴线占满整个交叉轴。

flex项的属性

---

1.order：定义flex项的排列顺序。

可取值：

整型，默认为0.

2.flex-grow：定义flex项的放大比例。

可取值：

默认为0，表示即使存在多余空间也不放大。

对比两图即可发现flex项放大了，充满容器。

3.flex-shrink：定义flex项的缩小比例。

可取值：

默认为1，表示如果空间不足就得缩小。

改成0时，即使空间不足也没有缩小flex项的大小。与下图对比。

4.flex-basis：定义在分配多余空间之前，flex项占据的主轴空间。

可取值：

默认为auto，即维持flex项之前的大小。

可设置flex项同样的大小。

5.flex：是flex-grow，flex-shrink，flex-basis的简写。

可取值：

默认为0 1 auto。

默认情况时：超过空间大小，缩小flex项。

none：即0 0 auto

超出空间大小也不缩小flex项大小。

auto： 即1 1 auto

6.align-self：允许单个flex项有与其他项不一样的对齐方式。

可取值：

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

单独设置flex项的对齐方式。