8项目通关前端/美团网布局项目06：完成banner左侧区域

@效果预览

据说在布局的世界里，得弹性盒者得天下！——Steve Jobsir

@布局思路

• 给菜单ul整体使用主轴为纵向的弹性盒，实现li的纵向排列；
• 纵向（主轴）上平均分布子元素；
• 在li内部将菜单项图标和箭头图标分别向左和向右浮动；
• 给li内的文字span的text-align设置为left;

@HTML部分

<!-- banner -->
<div class="banner">

    <!-- 左侧菜单区 -->
    <div class="left-box">

        <!-- 标题 -->
        <h6 class="title">全部分类</h6>

        <!-- 菜单 -->
        <ul class="menu">

            <li>
                <!-- 左图标 -->
                <i class="orangered left iconfont icon-meituan"></i>

                <!-- 菜单项名称 -->
                <span>美食</span>

                <!-- 右箭头 -->
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="orange left iconfont icon-meituan"></i>
                <span>外卖</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="yellow left iconfont icon-meituan"></i>
                <span>酒店HOT</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="green left iconfont icon-meituan"></i>
                <span>民宿</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="skyblue left iconfont icon-meituan"></i>
                <span>猫眼电影</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="aquamarine left iconfont icon-meituan"></i>
                <span>机票 / 火车票</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="purple left iconfont icon-meituan"></i>
                <span>休闲娱乐 / KTV</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="orangered left iconfont icon-meituan"></i>
                <span>生活服务</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="orange left iconfont icon-meituan"></i>
                <span>丽人 / 美发 / 医学美容</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="yellow left iconfont icon-meituan"></i>
                <span>结婚 / 婚纱摄影 / 婚宴</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="green left iconfont icon-meituan"></i>
                <span>亲子 / 儿童乐园 / 幼教</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="skyblue left iconfont icon-meituan"></i>
                <span>运动健身 / 健身中心</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="aquamarine left iconfont icon-meituan"></i>
                <span>家装 / 建材 / 家居</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="purple left iconfont icon-meituan"></i>
                <span>学习培训 / 音乐培训</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="orangered left iconfont icon-meituan"></i>
                <span>医疗健康 / 宠物 / 爱车</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>

            <li>
                <i class="orange left iconfont icon-meituan"></i>
                <span>酒吧 / 密室逃脱</span>
                <i class="right iconfont icon-xiangyou1"></i>
            </li>
        </ul>
    </div>

    <!-- 向右侧浮动的盒子 -->
    ...

</div>

@样式部分

• 主要用到纵向弹性盒 + 主轴方向均匀分布，其余都是细节；

/* 左侧菜单盒子 */
.left-box {

    /* 根据设计效果图设置宽高 */
    width: 230px;
    height: 478px;
    background-color: white;

    // 怪异盒模型令宽高包含内边距
    box-sizing: border-box;

    // 浅灰色边框
    border: 1px solid #eee;

    // 后代元素的文字都默认左对齐
    text-align: left;

    /* 定位到banner最左侧 */
    position: absolute;
    left: 0;

    // 向上突破父元素上沿
    top: -51px;

    /* 标题盒子 */
    &>.title {
        font-size: 16px;
        padding-left: 10px;

        /* 单行文字垂直居中 */
        height: 49px;
        line-height: 49px;
    }

    /* 竖排菜单 */
    &>.menu {

        /* 设计图实测高度（怪异盒模型以使宽高包含内边距） */
        height: 427px;
        box-sizing: border-box;

        // 底部留一点内边距
        padding-bottom: 10px;

        /* 纵向弹性盒 */
        display: flex;
        flex-direction: column;

        // 所有li垂直均匀分布
        justify-content: space-around;

        /* 菜单项 */
        &>li {

            // 文字垂直居中
            line-height: 25px;
            padding: 0 10px 0 10px;

            /* 左侧图标略大 */
            &>i:first-child {
                font-size: 18px;
            }

            /* 设置文字样式 */
            &>span {
                padding-left: 16px;
                font-size: 13px;
                color: #666;
            }

            /* 右侧箭头图标略小 */
            &>i:last-child {
                font-size: 10px;
                color: #ccc;
            }
        }

        /* 菜单项被滑过时背景高亮 + 文字高亮 */
        &>li:hover {
            background-color: #fef8d1;

            &>span {
                color: #333;
                font-weight: bold;
            }
        }
    }
}

@知识链接

• 弹性盒布局
• 使用图标字体

猛戳此处获取老师源码！ 更高处见！