弹性盒子模型

1.指定多个元素的排列方向

flex-direction:row;             /*默认值；从左到右排列。*/
flex-direction:column;          /*从上到下排列*/
flex-direction:row-reverse    /*横向反向排列*/
flex-direction:column-reverse  /*纵向反向排列*/

2.指定元素的宽度或者高度

flex-grow:
flex-shrink:/*第一个元素的宽度+(容器宽度-子元素总宽度)/(子元素flex-grow样式属性值总和) * 第一个元素flex-grow属性值*/
flex-basis: /*指定调整前的子元素宽度，与width作用完全一样*/

3.指定单行布局或多行布局

flex-wrap:nowrap;               /*默认值；不换行*/
flex-wrap:wrap;                 /*换行*/
flex-wrap:wrap-reverse     /*虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反*/

注：可以将flex-direction和flex-wrap样式属性值合并写在flex-flow样式属性中

4.指定水平方向对齐方式

justify-content: /*指定如何布局容器中除了子元素之外的main axis轴方向上的剩余空白部分*/
justify-content:flex-start;     /*默认值；从main-start开始布局所有子元素。*/
justify-content:flex-end;       /*从main-end开始布局所有子元素。*/
justify-content:center;         /*居中布局所有子元素。*/
justify-content:space-between;  /*将第一个元素布局在main-start处，将最后一个元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。*/
justify-content:space-around;   /*将空白部分平均分配在一下几处，如main-start与第一个子元素之间，各个子元素与子元素之间，最后一个子元素与main-end之间*/

5.指定垂直方向对齐方式

align-item:cross-start;       /**默认值；从cross-start开始布局所有子元素。*/
align-item:cross-end;         /*从cross-end开始布局所有子元素。*/
align-item:center;           /*居中布局所有子元素。*/
align-item:baseline;    /*如果子元素的布局方向与容器的布局方向不一致，该值等效于flex-start属性值的作用。反之，所有子元素中的内容沿基线对齐。*/
align-item:stretch;          /*同一行中的所有子元素高度被调整为最大*/
align-self:                           /*用于单独指定某些子元素的对齐方式*/

5.指定各行对齐方式

align-content:flex-start;       /*从cross-start开始布局所有行。*/
align-content:flex-end;         /*从cross-end开始布局所有行。*/
align-content:center;           /*居中布局所有行。*/
align-content:space-between;    /*将第一行布局在cross-start处，将最后一行布局在cross-end处，将空白部分平均分配在各行之间。*/
align-content:space-around;     /*将空白部分平均分配在以下几处，如cross-start与第一行之间，各行与行之间，最后一行与cross-end之间。*/

6.元素高度宽度自适应：
只对容器元素指定了宽度与高度：
水平方向排列时：三个元素的宽度为元素中内容的宽度，高度自动变为容器的高度
垂直排列：三个元素的高度为元素中内容的高度，宽度自动变为容器的宽度
造成问题：容器总会流出一大片空白区域
解决办法：为容器元素下的一个子元素设置box-flex属性。flex:1;设置其属性的元素高度或宽度会自动扩大。也可以为多个元素设置其flex属性，扩大后的div元素宽度或高度保持一致。

flex属性的属性值的正确含义：

7.用flex写三栏布局
（1）.HTML代码

<div id="container">
        <div id="left-sidebar">
            <h2>左侧边栏</h2>
            <ul>
                <li><a href="#">超链接</a></li>
                <li><a href="#">超链接</a></li>
                <li><a href="#">超链接</a></li>
                <li><a href="#">超链接</a></li>
                <li><a href="#">超链接</a></li>
            </ul>
        </div>
        <div id="contents">
            <h2>内容</h2>
            <p>实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章实力文章</p>
        </div>
        <div id="right-sidebar">
            <h2>右侧边栏</h2>
            <ul>
                <li><a href="#">超链接</a></li>
                <li><a href="#">超链接</a></li>
                <li><a href="#">超链接</a></li>
            </ul>
        </div>
        </div>

（2）.CSS代码

 *{
    margin: 0;
    padding: 0;
}
#container{
    display: flex;
}
#left-sidebar{
    width: 200px;
    padding: 20px;
    background-color: orange;
    order: 1;
}
#contents{
    /* width: 300px; */
    flex: 1;
    padding: 20px;
    background-color: yellow;
    order: 2;
}
#right-sidebar{
    width: 200px;
    padding: 20px;
    background-color: limegreen;
    order: 3;
}
#left-sidebar,#contents,#right-sidebar,#footer{
    box-sizing: border-box;
}