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），简称“项目”。

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

容器默认存在两根主轴：水平方向（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：主轴垂直方向，起点在下边沿

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

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

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

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

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

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

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

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

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

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

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

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

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.****.net/download/miss_ll/10991378