是时候系统的学习之一：display：flex

1.Flex布局是什么

Flex是Flexible Box的缩写 => 意为“弹性盒子”，用来为盒状模型提供最大的灵活性。 设置为Flex布局后，子元素的float、clear和vertical-align属性将失效。

传统的布局接近方式是给予盒状模型、依赖display属性+position属性+float属性，因此对于特殊布局非常不方便，例如垂直居中不易实现。直到2009年W3C提出了一种新的接近方案 => Flex布局。可以简便、完整、响应式地实现各种页面布局。【Chrome21+、Opera 12.1+、Firefox22+、Safari6.1+、IE10+】

2.基本概念

结构示意图：

采用Flex布局的元素，被称为Flex容器，其所有的子元素自动称为容器成员，成为Flex项目（Flex item），简称“项目”。

 

容器默认存在两根主轴：水平方向（main axis）和垂直方向交叉轴（cross axis）,默认项目按主轴排列。

• main start/end：主轴开始位置/结束位置；
• corss start/end：交叉轴开始位置/结束位置；
• main size/corss size：单个项目占据主轴/交叉轴的空间

3.容器属性

设置在容器上的属性有六种：

• flex-direction：容器内项目的排列方向（默认横向排列）
• flex-wrap：容器内项目换行方式
• flex-flow：以上两个属性的简写方式
• justify-content：项目在主轴上的对齐方式
• align-item：项目在交叉轴上如何对齐
• align-content：定义多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）

3.1 flex-direction【容器内项目的排列方向（默认横向排列）】

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

 3.2 flex-wrap：<flex-direction> || <flex-wrap>【容器内项目换行方式】

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

 3.3 flex-flow【以上两个属性的简写方式】

该属性是flex-direction属性和flex-wrap属性的简写方式，默认是row、norwap

 3.4 justify-content【项目在主轴上的对齐方式】

• flex-start：左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间的间隔相等
• space-around:每个项目两侧的间隔相等。即项目之间的间隔比项目与边框的间隔大一倍

 3.5 align-items【项目在交叉轴上如何对齐】

• flex-start：起点对齐
• flex-end：终点对齐
• center：中点对齐
• baseline：项目的第一行文字的基线对齐
• stretch(默认)：如果项目未设置高度或者设为auto，将占满整个容器的高度

 3.6 align-content【定义多根轴线的对齐方式】（如果项目只有一根轴线，该属性不起作用）

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

4.项目属性

设置在项目上的属性也有6个：

• order：定义项目的排序顺序【数值越小，排列约靠前，默认为0，可以是负值】
• flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
• flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
• flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。默认值为auto，即项目本来的大小
• flex：是flex-grow和flex-shrink和flex-basis的简写，默认是0，1，auto。后两个属性可选
• align-self：允许单个项目与其他项目不一样的对齐方式，可覆盖align-items的属性。默认值为auto。默认是auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。【align-self: auto | flex-start | flex-end | center | baseline | stretch;】

参考于： 

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

https://www.cnblogs.com/qingchunshiguang/p/8011103.html

自己写的小例子：

https://download.csdn.net/download/miss_ll/10991378