flex布局

在CSS3中flex可以非常便捷的可以帮助我们实现对页面的布局。

• 传统的页面布局，基于div+float来实现。
• flex可以快速实现页面的布局（很方便）。

关于flex布局你必须要了解的有一下几点：

<div class="menu" 样式>
    <div class="item" 样式>112</div>
    <div class="item">113</div>
</div>

【一】容器

【1】flex布局（主轴和副轴）

• flex-direction: row; // 主轴是横向
• flex-direction: column; // 主轴是纵向

<div class="menu">
    <div class="item">112</div>
    <div class="item">113</div>
</div>
<style>
    .menu{
        border: 1px solid red;
        width: 500px;
        
        display: flex;         // 表示flex布局
        flex-direction: row;   // 主轴是横向，副轴是纵向。
        flex-direction: column;
    }
</style>

【2】元素排列方式

justify-content，主轴上的元素的排列方式
align-items，副轴上的元素的排列方式。

<div class="menu">
    <div class="item">11</div>
    <div class="item">112</div>
    <div class="item">112</div>
</div>
<style>
    .menu {
        width: 500px;
        border: 1px solid red;
        display: flex;

        flex-direction: row;
        justify-content: flex-start;     /* 主轴=横向，横向从左开始 */
        justify-content: flex-end;       /* 主轴=横向，横向从右开始 */
        justify-content: space-between;   /* 主轴=横向，左右定格，中间元素等分空白 */
        justify-content: space-around;   /* 主轴=横向，所有元素等分空白 */
        justify-content: space-evenly;   /* 主轴=横向，元素间距一样 */
    }

    .item {
        border: 1px solid green;
        padding: 5px 50px;
        height: 50px;
        width: 40px;
    }
</style>

【3】换行

• flex-wrap: nowrap; 元素超过容器，不换行
• flex-wrap: wrap; 元素超过容器，换行

示例2：换行

<div class="menu">
    <div class="item">111</div>
    <div class="item">112</div>
    <div class="item">112</div>
    <div class="item">112</div>
    <div class="item">112</div>

</div>

<style>
    body{
        margin: 0;
    }
    .menu {
        width: 500px;
        height: 200px;
        border: 1px solid red;
        display: flex;

        flex-direction: row;
        justify-content: space-evenly;   /* 主轴=横向，元素间距一样 */
        align-items: flex-start;         /* 副轴=纵向，元素顶部*/

        flex-wrap: wrap;

    }

    .item {
        border: 1px solid green;
        padding: 5px 50px;
        height: 50px;
        width: 40px;
    }
</style>

【4】 多行对齐方式

align-content用于控制多行元素的对齐方式，如果元素只有一行则不会起作用；默认stretch，即在元素没设置高度，或高度为auto情况下让元素填满整个容器。

flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

align-content：flex-start
align-content：center

【二】元素

【1】 顺序

• order，默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

<div class="father">
    <div class="son" style="order: 2">11</div>
    <div class="son" style="order: 0">22</div>
    <div class="son" style="order: 1">33</div>
</div>

<style scoped>
    .father {
        border: 1px solid red;
        width: 500px;
        height: 300px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .father .son {
        border: 1px solid saddlebrown;
        width: 20px;
        height: 18px;
    }
</style>

7.2.2 剩余空间

• flex-grow，默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；

<div class="father">
        <div class="son">11</div>
        <div class="son" style="order: 1;flex-grow: 1">22</div>
        <div class="son" style="order: 0;flex-grow: 1">33</div>
    </div>