Flex弹性盒子基础属性，主轴与交叉轴理解，剩余空间排列理解 - 第九期线上班20191105

做了单行和多行元素的排序，没有把所有执行结果都截图出来。

<style type="text/css">
*{margin:0;padding:0}
    h3{
        text-align: center;
        font-size: 16px;
        width:500px;
        padding: 15px;
    }
    .item{
        background:#ffcaca;
        border:solid 1px #919191;
        box-sizing: border-box;
        text-align: center;
        padding: 50px;
        width:100px;
    }
    .container{
        width:500px;
        height:500px;
        display: flex;
        flex-flow:row wrap;
        /*justify-content: space-around; */
        /*justify-content: space-between;*/
        justify-content: space-evenly;
        align-items: center;  /*交叉轴居中*/
        /*align-items:flex-start; 交叉轴起始线开始*/
        /*align-items:end-start; 交叉轴终止线开始*/
        /*align-items:stretch; 交叉轴占满列*/
        border:solid 2px #7f6ded;
        box-sizing: border-box;
    }
</style>
<h3>单行排列</h3>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

<style type="text/css">
    h3{
        text-align: center;
        font-size: 16px;
        width:500px;
        padding: 15px;
    }
    .item{
        background:#ffcaca;
        border:solid 1px #919191;
        box-sizing: border-box;
        text-align: center;
        padding: 50px;
        width:100px;
    }
    .container2{
        width:500px;
        height:500px;
        padding: 20px;
        display: flex;
        flex-flow:column wrap;
        /*justify-content: space-around; */
        /*justify-content: space-between;*/
        justify-content: space-evenly;
        /*align-content:space-around;*/
        /*align-content:space-evenly;*/
        align-content:space-between;
        border:solid 2px #7f6ded;
        box-sizing: border-box;
    }
</style>
<h3>多行排列</h3>
<div class="container2">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>

Flex弹性盒子布局的两个难点是交叉轴和剩余空间分配方案
交叉轴交叉轴垂直于主轴的轴线， flex-direction 控制元素的排列方向的垂直方向就是交叉轴。

---

剩余空间分配方案属性图解

---

不管是justify-content还是align-content原理都是一样的，只是排列方向不同。

总结

---

1.display:flex/inline-flex的区别是，flex是块级弹性盒子 width:100% 独占一行，inline-flex是内联弹性盒子宽高跟随内容，多个inline-flex可以在同行。
2.盒子的交叉轴并不是垂直方向，取决与flex-direction属性的值是row还是column，row 交叉轴就是垂直方向，column 交叉轴就是水平方向。
3.justify-content 可以控制主轴元素排列，无论单行还是多行都可以操作。
4.交叉轴单行和多行需要分别处理，align-items 是单行排列，align-items只对多行交叉轴有效果。
5.flex-start 和 flex-end 分别指向容器的起止和终止，row 水平方向是最左和最右，row 水平方向是最上和最下。
6.stretch 是交叉轴元素占满列。

默写3遍Flex属性。