Flex移动合理布局中单行和双行合理⊙ω⊙布局的

日期：2021-01-20 类型：科技新闻 

关键词：免费自助建站，手机建站平台，wap建站，免费自助建站平台，H5网站,H5模板建站

这儿是单行合理布局 应用ul>li 来合理布局

<ul class="local-nav">
        <li>
            <a href="#">
                <span class="local-nav-icon-icon1"></span> 功略旅游景点
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon2"></span> 门票费玩耍
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon3"></span> 特色美食林
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon4"></span> 附近游
            </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon5"></span> 一日游
            </a>
        </li>
    </ul>

CSS款式以下，因为较为懒文本立即加在后边，沒有放进标识中。先界定了总体的

.local-nav li [class^="local-nav-icon"]

在li 中类名中以local-nav-icon开始的类写了款式，后不在同的li中换掉不一样的小精灵图。

.local-nav {
    display: flex;
    height: 64px;
    background-color: #fff;
    border-radius: 8px;
    margin: 3px 4px;
}

.local-nav li {
    flex: 1;
}

.local-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
}

.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    margin-top: 8px;
    background: url(../images/localnav_bg.png) no-repeat 0 0;
    background-size: 32px auto;
}

.local-nav li .local-nav-icon-icon2 {
    background-position: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    background-position: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    background-position: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    background-position: 0 -128px;
}

在双行中合理布局中，下边得出一个li的书写，别的li同样。

<ul class="subnav-entry">
        <li>
            <a href="#" title="随意行">
                <span class="subnav-entry-icon1"></span>
                <span>随意行</span>
            </a>
        </li>

CSS款式以下

.subnav-entry {
    display: flex;
    border-radius: 8px;
    margin: 0px 4px;
    background-color: #fff;
    flex-wrap: wrap;
}
.subnav-entry li {
    /* flex: 1; */
    flex: 20%;
}

这儿是flex为20%，既可让每五个排到一行，设定了换行。每列放不下便会全自动换行

.subnav-entry a {
    display: flex;
     flex-direction: column;
    align-items: center;
}

这儿选用是以y主导轴，x轴为側轴两端对齐的方法。

.subnav-entry [class^="subnav-entry-icon"] {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}

.subnav-entry-icon2 {
    background: url(../images/subnav-bg.png) no-repeat;
    background-size: 28px auto;
}

上边的方式是较为非常容易了解和记忆力的方法来做

小结

到此这篇有关Flex移动合理布局中单行和双行合理布局的差别及应用详细说明的文章内容就详细介绍到这了,大量有关Flex移动合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：网站的文本还必须设计方案吗？ 返回下一篇：没有了