Differences between single line and double line layout in flex mobile layout

Time:2021-2-27

Here is a single line layout, use UL > Li to layout

<ul class="local-nav">
        <li>
            <a href="#">
                < span class = "local NAV icon 1" > < / span > scenic spots
            </a>
        </li>
        <li>
            <a href="#">
                < span class = "local-nav-icon-icon2" > < / span > tickets for fun
            </a>
        </li>
        <li>
            <a href="#">
                < span class = "local-nav-icon-icon3" > < / span > gourmet forest
            </a>
        </li>
        <li>
            <a href="#">
                < span class = "local-nav-icon-icon4" > < / span > peripheral Tour
            </a>
        </li>
        <li>
            <a href="#">
                < span class = "local NAV icon-icon5" > < / span > one day tour
            </a>
        </li>
    </ul>

The CSS style is as follows. Due to laziness, the text is directly added to the back and is not put into the label. First of all, we define the whole

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

In Li, the class name that starts with local NAV icon is styled, and then different sprites are replaced in different 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;
}

In the double row layout, the following is the way to write a Li, the other Li are the same.

<ul class="subnav-entry">
        <li>
            < a > A
                <span class="subnav-entry-icon1"></span>
                <span>Free travel</span>
            </a>
        </li>

The CSS style is as follows


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

Here, flex is 20%, which can make every five lines in one line and set the line feed. Every line will wrap automatically if it cannot be put down


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

Here, y is the main axis and X is the side axis.


.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;
}

The above method is easier to understand and remember

summary

So far, this article about the difference between single line and double line layout in flex mobile layout and the use of detailed explanation is introduced here. For more related flex mobile layout content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!