Flex布局应用---导航栏实现

单行导航栏

1.实现效果：

html：

<!-- 局部导航栏 -->
    <ul class="local-nav">
        <li>
            <a href="#" title="攻略景点">
                <span class="local-nav-icon1"></span>
                <span>攻略景点</span>
            </a>
        </li>
        <li>
            <a href="#" title="门票玩乐">
                <span class="local-nav-icon2"></span>
                <span>门票玩乐</span>
            </a>
        </li>
        <li>
            <a href="#" title="美食林">
                <span class="local-nav-icon3"></span>
                <span>美食林</span>
            </a>
        </li>
        <li>
            <a href="#" title="周边游">
                <span class="local-nav-icon4"></span>
                <span>周边游</span>
            </a>
        </li>
        <li>
            <a href="#" title="一日游">
                <span class="local-nav-icon5"></span>
                <span>一日游</span>
            </a>
        </li>
    </ul>

css

.local-nav {
    
    
    padding: 0;
    margin: 0 10px;
    height: 64px;
    background-color: pink;
    border-radius: 8px;
    /* 父元素设置flex */
    display: flex;
}

.local-nav li {
    
    
    /* 1个li子元素分父元素的1部分，5个li子元素将父级均分为5份 */
    flex: 1;
}

.local-nav a {
    
    
    display: flex;
    /* 设置主轴为Y轴，则元素竖着显示 */
    flex-direction: column;
    /* 设置侧轴（此时为X轴）上的子元素排列方式（单行） */
    align-items: center;
}

/* 属性选择器 */
.local-nav span[class^="local-nav-icon"] {
    
    
    width: 40px;
    height: 40px;
    /* 精灵图二倍图做法：背景缩放宽度为原图宽度的一半，高度自适应宽度 */
    background-size: 40px auto;
}

.local-nav .local-nav-icon1 {
    
    
    background: url(../imgs/local-sprite.png) no-repeat 0 0;
}

.local-nav .local-nav-icon2 {
    
    
    background: url(../imgs/local-sprite.png) no-repeat 0 -40px;
}

.local-nav .local-nav-icon3 {
    
    
    background: url(../imgs/local-sprite.png) no-repeat 0 -78px;
}

.local-nav .local-nav-icon4 {
    
    
    background: url(../imgs/local-sprite.png) no-repeat 0 -118px;
}

.local-nav .local-nav-icon5 {
    
    
    background: url(../imgs/local-sprite.png) no-repeat 0 -158px;
}

多行导航栏

1.实现效果：

实现代码：

<nav>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>

        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>

        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
        <a href="#">
            <img src="./imgs/shop.png" alt="">
            <span>京东超市</span>
        </a>
    </nav>

nav {
    
    
    padding-top: 8px;
    display: flex;
    /* 允许子元素换行 */
    flex-wrap: wrap;
}

nav a {
    
    
    background-color: white;
    text-align: center;
    /* 子元素写份数时，可以写百分数,相对于父级来说的 */
    flex: 20%;
}

nav a img {
    
    
    width: 40px;
    margin: 10px 0;
}

nav a span {
    
    
    display: block;
}