flex弹性布局之容器属性

一、flex布局

学习flex弹性布局为了解决一些特殊的布局，在这之前我们可以利用大盒子套小盒子，浮动，定位等来完成一些简单的布局，但是不能完成有些特殊的布局。
1、任何一个容器都可以设为flex布局，称该容器为flex容器，它的所有子元素成为flex项目。（块级元素也可以使用flex布局）
2、项目默认沿主轴排列，主轴默认在水平方向，交叉轴默认在垂直方向。

二、对于容器有哪些设置属性？

1、首先我们要给一个父盒子设置为弹性布局display:flex
2、指定为flex布局后，我们对该容器可以有下面6种属性设置。

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

(1)、flex-direction属性决定主轴的方向（即项目的排列方向），它有四个属性值
flex-direction: row | row-reverse | column | column-reverse;

图片.png

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

(2)、flex-wrap属性定义：如果一条轴线排不下，如何换行。它有三个值：
flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行
wrap:换行，第一行在上面
wrap-reverse:换行，第一行在下方

nowrap不换行.png
nowrap默认不换行时，如果容器宽度小于所有项目宽度总和，项目宽度会自适应容器宽度
wrap.png
项目大下不变，当容器装不下时会换到下一行
wrap-reverse.png
换行，但是颠倒上下行顺序
(3)、以上两种属性可以简写为：
flex-flow: <flex-direction> || <flex-wrap>
(4)、justify-content属性定义了项目在主轴上的对齐方式。它有五个值。
justify-content: flex-start | flex-end | center | space-between | space-around;

下面假设主轴为从左到右：
flex-start(默认值)：左对齐
flex-end:右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等,所以，最左和最右边的项目离边框的间隔是项目与项目之间间隔的一半。

图片.png
(5)、align-items属性定义项目在交叉轴上如何对齐，它有五个值：
align-items: flex-start | flex-end | center | baseline | stretch ;

具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下：
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐。
baseline:项目的第一行文字的基线对齐。
stretch(默认值)：如果项目未设置高度或设为auto，将占满整个容器的高度。

图片.png

(6)、align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。它有五个值。

flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐。
center：与交叉轴的中点对齐
space-between:与交叉轴两端对齐，轴线之间的间隔平均分布。

图片.png