flex布局详细示例：

flex有6个容器属性分别有：

1. flex-direction   决定主轴的方向（排列顺序）

4个值：row；row-reverse；column；column-reverse；

<div class="parent">
        <div class="child">aaa</div>  
        <div class="child">bbb</div>
        <div class="child">ccc</div>
    </div>
<style>
        .parent {
        width: 200px;
        height: 200px;
        background: black;
        display: flex;   /* 布局 */
        flex-direction: row;   /* 主轴为水平方向，起点在左端 */
        flex-direction: row-reverse;   /*主轴为水平方向，起点在右端*/
        flex-direction:column;     /* 主轴为垂直方向，起点在上沿 */
        flex-direction: column-reverse;   /* 主轴为垂直方向，起点在下沿 */
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
    }
</style>

2.flex-wrap    排在一条线上（称“轴线”），如果一条轴线排不下，如何换行或不换行

3个值：nowrap；wrap；wrap-reverse；

<div class="parent">
    <div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child">ccc</div>
    <div class="child">ddd</div>
    <div class="child">eee</div>
</div>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background: black;
        display: flex;  /* 布局 */
        flex-direction: row;    /* 主轴为水平方向，起点在左端 */
        flex-wrap:nowrap ； /* 不换行*/
        flex-wrap: wrap;  /* 换行，第一行在上方*/
        flex-wrap:wrap-reverse；   /* 换行，第一行在下方*/
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
    }

3.flex-flow    是flex-direction属性和flex-wrap属性的简写形式

可以放2个值，任意它俩的值：任意放一个flex-direction和一个flex-wrap的值

<div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child">ccc</div>
    <div class="child">ddd</div>
    <div class="child">eee</div>
</div>
<style>
    .parent {
        width: 200px;
        height: 200px;
        background: black;
        display: flex;   /* 布局 */
        flex-flow: column wrap;   /* 垂直，换行，第一行在上方*/ 
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
    }

4.justify-content   定义了项目在主轴上的对齐方式

5个值：flex-start; flex-end; center; space-between;  space-around;

<div class="parent">
    <div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child">ccc</div>
</div>
<style>
    .parent {
        width: 300px;
        height: 200px;
        background: black;
        display: flex;    /* 布局 */
        justify-content: flex-start;  /* 左对齐*/
        justify-content:flex-end;  /* 右对齐*/
        justify-content: center;  /* 居中*/
        justify-content:space-between;  /* 两端对齐，项目之间的间隔都相等*/
        justify-content:space-around;  /* 两侧的间隔相等，中间间隔比项目与边框间隔大一倍*/
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
    }

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

5个值：flex-start；flex-end; center; baseline; stretch;

<div class="parent">
    <div class="child" style="width: 50px;height:120px;">aaa</div>
    <div class="child" style="width: 50px;height:100px;">bbb</div>
    <div class="child" style="width: 50px;height:120px;">ccc</div>
</div>
<style>
    .parent {
        width: 300px;
        height: 200px;
        background: black;
        display: flex;  /* 布局 */
        align-items:flex-start;  /* 交叉轴的起点对齐 */
        align-items:flex-end;  /* 交叉轴的终点对齐 */
        align-items:center;  /* 交叉轴的中点对齐*/
        align-items:baseline;  /* 项目的第一行文字的基线对齐 */
        align-items:stretch;  /* 如果项目未设置高度或设为auto，将占满整个容器的高度 */
    }
    .child {
        background-color: red;
        margin-left: 20px;
    }

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

6个值：flex-start; flex-end; center; space-between; space-around; stretch;

<div class="parent">
    <div class="child">aaa</div>
    <div class="child">bbb</div>
    <div class="child"">ccc</div>
    <div class="child">ddd</div>
    <div class="child"">eee</div>
</div>
<style>
    .parent {
        width: 300px;
        height: 200px;
        background: black;
        display: flex;   /* 布局 */
        flex-wrap: wrap;   /* 换行，第一行在上方*/
        align-content: flex-start;   /* 与交叉轴的起点对齐*/
        align-content:  flex-end;   /* 与交叉轴的终点对齐 */
        align-content: center;   /* 与交叉轴的中点对齐*/
        align-content: space-between;   /* 与交叉轴两端对齐，轴线之间的间隔平均分布*/
        align-content: space-around;   /* 每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍 */
        align-content:stretch;   /* 轴线占满整个交叉轴 */
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
        margin-left: 20px;
    }

flex有6个项目属性分别有：

1. order  定义项目的排列顺序。数值越小，排列越靠前，默认为0

<div class="parent">
    <div class="child child1">aaa</div>
    <div class="child child2">bbb</div>
    <div class="child child3">ccc</div>
</div>
<style>
    .parent {
        width: 300px;
        height: 200px;
        background: black;
        display: flex;  
    }
    .child {
        width: 50px;
        height: 50px;
        margin-left: 20px;
    }
    .child1{
        background: red;
        order:3;  /* 排在第三 */
    }
    .child2{
        background: yellow;
        order:1;  /* 排在第一 */
    }
    .child3{
        background: blue;
        order:2;  /* 排在第二  */
    }

2.flex-grow  定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

<div class="parent">
    <div class="child child1">aaa</div>
    <div class="child child2">bbb</div>
    <div class="child child3">ccc</div>
</div>
<style>
    .parent {
        width: 300px;
        height: 200px;
        background: black;
        display: flex;  
    }
    .child {
        width: 50px;
        height: 50px;
        margin-left: 20px;
    }
    .child1{
        background: red;
        flex-grow: 1;   /* 它和1一样的值宽度一样  */
    }
    .child2{
        background: yellow;
        flex-grow:2;   /* 2的值比1的值大就比它两个的宽大 */
    }
    .child3{
        background: blue;
        flex-grow: 1;   /* 它和一样的值宽度一样  */
    }

3.flex-shrink  定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

<div class="parent">
    <div class="child child1">aaa</div>
    <div class="child child2">bbb</div>
    <div class="child child3">ccc</div>
    <div class="child child4">ddd</div>
    <div class="child child5">eee</div>
</div>
<style>
    .parent {
        width: 300px;
        height: 200px;
        background: black;
        display: flex;  
    }
    .child {
        width: 50px;
        height: 50px;
        margin-left: 20px;
    }
    .child1{
        background: red;
        flex-shrink: 1;   /* 缩小比例1比0大就是1缩小比是小的 */
    }
    .child2{
        background: yellow;
        flex-shrink:0;   /* 缩小比例0比1小就是0缩小比例是大的 */
    }
    .child3{
        background: blue;
        flex-shrink: 1;  /* 缩小比例1比0大就是1缩小比是小的 */
    }
    .child4{
        background: blue;
        flex-shrink: 1;  /* 缩小比例1比0大就是1缩小比是小的 */
    }
    .child5{
        background: blue;
        flex-shrink: 1;  /* 缩小比例1比0大就是1缩小比是小的 */
    } 

4.flex-basis  定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

值 ：auto

5.flex  是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

值 ：none

6.align-self   允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch.

值：auto；flex-start；flex-end ; center；baseline；stretch;