The difference and usage of single-line and double-line layout in Flex mobile layout

<ul class="local-nav">
        <li>
            <a href="#">
                <span class="local-nav-icon-icon1"></span> Attractions </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon2"></span> Tickets and entertainment </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon3"></span> Food Forest </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon4"></span> Tours nearby </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon5"></span> Day Tours </a>
        </li>
    </ul>

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

<ul class="subnav-entry">
        <li>
            <a href="#" title="Free Travel">
                <span class="subnav-entry-icon1"></span>
                <span>Free travel</span>
            </a>
        </li>

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

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

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