Flex モバイルレイアウトにおけるシングルラインレイアウトとダブルラインレイアウトの違いと使い方

レイアウトに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 {
    ディスプレイ: フレックス;
    高さ: 64px;
    背景色: #fff;
    境界線の半径: 8px;
    マージン: 3px 4px;
}

.local-nav li {
    フレックス: 1;
}

.local-nav {
    ディスプレイ: フレックス;
    flex-direction: 列;
    アイテムの位置を中央揃えにします。
    フォントサイズ: 12px;
}

.local-nav li [class^="local-nav-icon"] {
    幅: 32px;
    高さ: 32px;
    上マージン: 8px;
    背景: url(../images/localnav_bg.png) no-repeat 0 0;
    背景サイズ: 32px 自動;
}

.local-nav li .local-nav-icon-icon2 {
    背景位置: 0 -32px;
}

.local-nav li .local-nav-icon-icon3 {
    背景位置: 0 -64px;
}

.local-nav li .local-nav-icon-icon4 {
    背景位置: 0 -96px;
}

.local-nav li .local-nav-icon-icon5 {
    背景位置: 0 -128px;
}

二行組の場合、1つの字に対する書き方は次の通りで、他の字も同様です。

<ul class="subnav-entry">
        <li>
            <a href="#" title="無料旅行">
                <span class="subnav-entry-icon1"></span>
                <span>無料旅行</span>
            </a>
        </li>

CSSスタイルは以下のとおりです

.サブナビゲーションエントリ{
    ディスプレイ: フレックス;
    境界線の半径: 8px;
    マージン: 0px 4px;
    背景色: #fff;
    flex-wrap: ラップ;
}
.subnav-entry li {
    /* フレックス: 1; */
    フレックス：20%
}

ここではフレックスが 20% に設定されており、5 個ごとに一列に並べることができ、改行が設定されます。収まらない場合は各行が自動的に折り返されます

.subnav-entry a {
    ディスプレイ: フレックス;
     flex-direction: 列;
    アイテムの位置を中央揃えにします。
}

ここでは、y 軸が主軸として使用され、x 軸が横軸として使用されます。

.subnav-entry [class^="subnav-entry-icon"] {
    幅: 28px;
    高さ: 28px;
    上マージン: 4px;
    背景: url(../images/subnav-bg.png) 繰り返しなし;
    背景サイズ: 28px 自動;
}

.subnav-entry-icon2 {
    背景: url(../images/subnav-bg.png) 繰り返しなし;
    背景サイズ: 28px 自動;
}

上記の方法は理解しやすく、覚えやすいです。

要約する

Flex モバイルレイアウトにおける 1 行レイアウトと 2 行レイアウトの違いと詳細な使用方法については、これで終わりです。Flex モバイルレイアウトに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML ul 順序なしテーブルのアプリケーションネスト

>>: JavaScript でオブジェクトをエレガントに扱う 6 つの方法