display：flex 布局

一.display：flex 布局

display：flex是一种布局方式，它可以用于容器 也可用于行内样式。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度 主要是为了适应所有类型的显示设备和屏幕尺寸 。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。

最重要的是，flexbox布局与方向无关，不同于常规布局（基于垂直的块（block）和基于水平的内联（inline））。 虽然传统布局适用于页面，但它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）。

首先flex的出现是为了解决哪些问题呢？
1.页面行排列布局
2.子选项分区域时 flex用的是所占的比例 会方便很多

二.flex的属性

1.flex-direction ：容器内元素的排列方向（默认为横向排列）
row：横向为主轴 从左至右排列
column：垂直为主轴 从上往下垂直排列
column-reverse：从下往上垂直排列

2.flex-wrap 容器内元素的换行 （默认为不换行）
nowrap ：（默认值) 不换行。
wrap：换行

3.justify-content
center：元素在主轴（页面）上居中排列
flex-start：元素在主轴（页面）上由左或者上开始排列
flex-end：元素在主轴（页面）上由右或者下开始排列
space-between;元素在主轴（页面）上左右两端或者上下两端开始排列
space-around 元素两边的间距是容器中两个子元素间距的一半

4.align-items 元素在当前主轴上对齐的方式
flex-start; 子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）
baseline; 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）
flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

5.align-content 在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
center; 默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。
flex-start; 元素位于容器的开头。各行向弹性盒容器的起始位置堆叠。
flex-end; 元素位于容器的结尾。各行向弹性盒容器的结尾位置堆叠。
stretch; 元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。
space-between 元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。
**space-around;**元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。

space-around 和 space-between 两个不是很好理解
space-between 是两端对齐，让各个子元素之间的间隔是一样的，但两端的子元素之间的间隔是 0
space-around 会在每个子元素的两边出现大小高低相同的间隔，意思就是让两端的子元素和容器之间的间隔大小正好是两个子元素之间间隔大小的一半（每个矩形子元素产生的间隔不会重叠，所以间隔变成两倍）。