弹性盒子、弹性布局

弹性盒子

对父级进行设置

给父级开启弹性布局

• display:flex; 子集变成行内块元素
• display:inline-flex; 子集变成行元素

主轴

• flex-direction：row; 默认，元素从左向右排列
• flex-direction: row-reverse; 元素从右向左排列
• flex-direction：column； 元素从上向下排列
• flex-direction：column-reverse；元素从下向上排列

辅轴、交叉轴

• flex-wrap：nowrap； 不换行
• flex-wrap：wrap；元素会换行
• flex-wrap：wrap-reverse；反向换行

对齐方式

主轴

• justify-content：flex-start；默认，向左对齐
• justify-content：flex-end；向右对齐
• justify-content：center；居中对齐
• justify-content：space-between；头尾元素靠边，中间空白区域，元素均分
• justify-content：space-around：空白区域均分

辅轴

单轴对齐

• align-items:flex-start；默认，顶部对齐
• align-items：flex-end；尾部对齐
• align-items：center；居中对齐
• align-items：strength；元素拉伸占满整个容器
• align-items：baseline；基线对齐

多轴对齐

• align-content:flex-start；默认，顶部对齐
• align-icontent：flex-end；尾部对齐
• align-content：center；居中对齐
• align-content：strength；元素拉伸占满整个容器
• align-content：space-between；两端对齐，中间空白均分
• align-content：space-around；空白均分

html代码

    <div class="head">
        <div class="logo"></div>
        <ul class="nav">
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>55</li>
        </ul>
        <div class="search"></div>
    </div>

    <div class="shop">
        <div class="shopLeft"></div>
        <ul class="shopRight">
            <li>11</li>
            <li>22</li>
            <li>33</li>
            <li>44</li>
            <li>55</li>
            <li>66</li>
            <li>77</li>
            <li>88</li>
        </ul>
    </div>

css代码

        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        /* 头部 */
        .head{
            width: 1200px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
        }
        .logo{
            width: 100px;
            height: 100px;
            background-color: #f0f;
        }
        .nav{
            width: 600px;
            height: 100px;
            background-color: #00f;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .nav>li{
            text-align: center;
            padding: 0 15px;
            height: 40px;
            background-color: #ff0;
            line-height: 40px;
        }
        .search{
            width: 200px;
            height: 100px;
            background-color: #f00;
        }
        /* 手机 */
        .shop{
            width: 1200px;
            height: 600px;
            margin: 0 auto;
            border: 1px solid;
            display: flex;
            justify-content: space-between;
        }
        .shopLeft{
            width: 200px;
            height: 100%;
            background-color: #f0a9fc;
        }
        .shopRight{
            height: 100%;
            width: 980px;
            background-color: #a0b0cf;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: space-between;
        }
        .shopRight>li{
            width: 230px;
            height: 280px;
            background-color: #f0a9fc;
        }

对子级进行设置

• order 排序，默认为0，可以是负数，值越小越靠前
• flex-grow 当父盒子宽度大于子盒子的总宽度时，放大，将剩余的空间分配，放大默认值是0
• flex-shrink 当父盒子宽度小于子盒子总宽度时，按比例缩小，默认为1，不缩小为0
• flex-basis 主轴占比，默认为原盒子大小，auto，用它设置的宽度权重更高。可以设置固定值（npx），也可以设置为百分比
• 简写属性 flex：flex-grow flex-shrink flex-basis；
• align-self 允许子集单个项与其他元素对齐方式不同，和align-items相对应，可以覆盖当前父级的align-items，但是如果父级设置为align-content，则无效