Der Unterschied und die Verwendung von einzeiligem und zweizeiligem Layout im Flex-Mobillayout

<ul Klasse="lokale Navigation">
        <li>
            <a href="#">
                <span class="local-nav-icon-icon1"></span> Sehenswürdigkeiten </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon2"></span> Tickets und Unterhaltung </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon3"></span> Nahrungswald </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon4"></span> Touren in der Nähe </a>
        </li>
        <li>
            <a href="#">
                <span class="local-nav-icon-icon5"></span> Tagestouren </a>
        </li>
    </ul>

.lokale Navigation {
    Anzeige: Flex;
    Höhe: 64px;
    Hintergrundfarbe: #fff;
    Rahmenradius: 8px;
    Rand: 3px 4px;
}

.local-nav li {
    biegen: 1;
}

.local-nav ein {
    Anzeige: Flex;
    Flex-Richtung: Spalte;
    Elemente ausrichten: zentrieren;
    Schriftgröße: 12px;
}

.local-nav li [Klasse^="local-nav-Symbol"] {
    Breite: 32px;
    Höhe: 32px;
    Rand oben: 8px;
    Hintergrund: URL (../images/localnav_bg.png) keine Wiederholung 0 0;
    Hintergrundgröße: 32px auto;
}

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

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

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

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

<ul Klasse="Unternavigationseintrag">
        <li>
            <a href="#" title="Freie Reise">
                <span class="subnav-entry-icon1"></span>
                <span>Freie Fahrt</span>
            </a>
        </li>

.subnav-eintrag {
    Anzeige: Flex;
    Rahmenradius: 8px;
    Rand: 0px 4px;
    Hintergrundfarbe: #fff;
    Flex-Wrap: Umwickeln;
}
.subnav-entry li {
    /* flex: 1; */
    Flexibilität: 20 %;
}

.subnav-eintrag a {
    Anzeige: Flex;
     Flex-Richtung: Spalte;
    Elemente ausrichten: zentrieren;
}

.subnav-entry [Klasse^="subnav-entry-Symbol"] {
    Breite: 28px;
    Höhe: 28px;
    Rand oben: 4px;
    Hintergrund: URL (../images/subnav-bg.png) keine Wiederholung;
    Hintergrundgröße: 28px auto;
}

.subnav-entry-icon2 {
    Hintergrund: URL (../images/subnav-bg.png) keine Wiederholung;
    Hintergrundgröße: 28px auto;
}