フレックスレイアウトは、1行あたりの固定行数と適応レイアウトを実現します。

この記事では、1行あたりの固定行数+アダプティブレイアウトを実現するフレックスレイアウトを紹介し、皆さんと共有します。詳細は次のとおりです。

エフェクト表示

分析

 <div class="template" v-for="(item,templateIndex) in 7">
              <div @click="useTemplate()" v-touch:long="(e)=>touchin(groupIndex,templateIndex)">
                <img class="icon" src="../../../assets/home-page/templateIcon.png" alt />
                <div class="templateName">テンプレート名</div>
              </div>
            </div>

// 親ボックス、次のように設定:
.テンプレートアイテム{
  幅: 100%;
 
  テキスト配置: 中央;
  ディスプレイ: フレックス;
  align-content: flex-start;
  flex-flow: 行折り返し;
}

//サブボックス、次のように設定:
 。テンプレート {
  フレックス: 0 0 25%;
  下マージン: 20px;
}

親ボックスの設定:

サブボックスの配置方法はflex-startです。始点からサブボックスを配置し、flex-flowで改行を設定します。改行を設定しない場合は、サブ要素のサイズが縮小され、1行に配置されているような効果が得られます。

サブボックス設定:

子ボックスの配置を設定するには、flex:0 0 25% を使用します。flexプロパティは、flex-grow、flex-shrink、flex-basisの略です。デフォルト値は、0、1、autoです。サブアイテムのシェア数を指定する

分解説明: flex:0 0 25% は、flex-grow=0 (デフォルトでは拡大なし) + flex-shrink=0 (縮小なし) + flex-basis=25% (プロジェクトが主軸スペースを占有) に等しい

フレックスレイアウトの基本的な理解については、ブログ「フレックスレイアウトの基本的な理解」をお読みください。

フレックスレイアウトを使用して固定行数+アダプティブレイアウトを実現する方法についての記事はこれで終わりです。フレックスレイアウトを使用して固定行数+アダプティブレイアウトを実現する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。