前端布局之flex布局flex布局的属性比较少，所以就不用图示了，直接看概念。上面的代码的html结构中，contai

前言

table布局看这里
grid布局看这里

flex布局

flex布局的属性比较少，所以就不用图示了，直接看概念。

Flex容器

  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
  </div>

上面的代码的html结构中，container就是容器，当设置display:flex时，它就变成了一个Flex容器，此时它的所有子项（item）的float、clear、vertical-align就失效了。

Flex容器属性值

flex-direction: row | row-reverse | column | column-reverse

子项的排列顺序：横向 | 横向（从右向左）| 竖向 | 竖向（从下向上）
flex-wrap: nowrap | wrap | wrap-reverse;

子项超出容器宽度是否换行：不换 | 换 | 换行（换行后第二行在第一行的上面）
justify-content: flex-start | flex-end | center | space-between | space-around;

子项的水平对齐：左对齐 | 右对齐 | 居中 | 两端对齐，项目之间有相等间隔 | 平分容器的宽度
align-items: flex-start | flex-end | center | baseline | stretch;

子项的垂直对齐：上对齐 | 下对齐 | 居中对齐 | 文字对齐 | 默认值（如未设置高度，会占满容器的高度）

首先，flex-direction的值得是column|column-reverse
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

这个属性的作用跟align-items基本一致，区别是align-items作用的是单个item，但align-content真的是n个item组成的集合

首先flex-direction的值是row|row-reverse,其次flex-wrap的值得是wrap|wrap-reverse,对于上面的dom结构，如果flex容器的宽度仅能容纳一个子项,那么所有的子项就垂直并列了，这时候就跟align-content一模一样了，如果flex容器的宽度仅能容纳两个子项，那么所有子项就变成了三行，这样一行两个元素就变成一个集合

子项属性值

order: <integer>

子项的顺序，数值越大越靠后，默认值0
flex-basis: <length> | auto

当设置这个属性以后，width属性就不起作用了，它的值可以是px也可以是%
flex-grow: <number>

项目的放大比例，默认值时0，当它的值不为0时，子项会等比放大填充满整个容器。同时这个属性也会覆盖width，flex-grow得值越大，其对应的子项宽度也越大

只有一个子项设置flex-grow后，它会填充容器所有的剩余空间
flex-shrink: <number>

项目的缩小比例，默认值1，当容器的宽度较小的时候，默认所有子项都要等比缩小的，但是当flex-shrink设置为0得时候，所有子项就会一直保持原来尺寸不变

只有一个子项设置flex-shrink为0的时候，其他子项会自动缩小，但它扔会保持原来尺寸

应用场景

水平垂直居中

    .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

就是这么简单，而且子项的数量可以不止为1

响应式布局

三列布局，中间一列自适应

    // HTML
   <div class="container">
       <div class="left"></div>
       <div class="center"></div>
       <div class="right"></div>
   </div> 
    
    // CSS
    .container {
        display: flex;
        flex-direction: row;
        height: 1000px;
        width: 100%;
    }
    .left,
    .right {
        width: 200px;
        background-color: blue;
        height: 100%;
    }
    .center {
        flex-grow: 1;
        background-color: red;
        height: 100%;
    }

动态高度的页脚贴在页面底部

    // HTML
    <div class="container">
        <div class="bottom"></div>
    </div>
    // CSS
    .container {
        display: flex;
        flex-direction: column-reverse;    
    }

比table布局不止简单一点点

瀑布流布局

    // HTML
    <div class="container">
        <div class="col1"></div>
        <div class="col2"></div>
        <div class="col3"></div>
    </div>
    // CSS
    .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .col {
        display: flex;
        flex-direction: column;
    }

再配合JS,将元素一个一个插进列中

    let data1 = [], //第一列
        data2 = [], //第二列
        data3 = [], //第三列
        i = 0;
    while (i < data.length) {
        data1.push(data[i++]);
        if (i < data.length) {
            data2.push(data[i++]);
        }
        if (i < data.length) {
            data3.push(data[i++]);
        }
    }
    return {
        //第一列
        data1,
        //第二列
        data2,
        //第三列
        data3
    };

本来应该动态计算列的高度，然后选择性插入，此处就pass这个过程。

结束

代码少，实现简单，实乃最佳布局方式