CSS - フレックスレイアウトの完璧なソリューションです。行は固定数を表示し (均等に分散)、改行を強制し、それを超えると「左」になります (詳細なソリューション、Web、Vue、React などのフロントエンドプロジェクトに適しています)。など）

序文

flex レイアウトの下の justify-content: xx に関して、多くの友人はラップ後に左側に配置したいと考えています (デフォルトでは中央に均等に配置されます)。

この記事では、純粋な、flex / justify-content エラスティックレイアウトを実装し、改行後に要素を左に並べます。

ワンクリックで例をコピーし、少しスタイルを変更して使用できます。

下図のように3項目を1行に表示(カスタマイズ可能)し、幅が変わると「均等配分」を維持し、はみ出し部分が変わると「左寄せ」する例です。

さらに、要素間の「ギャップ」を自由に設定することもできます。詳細については、コードを参照してください。

ここに画像の説明を挿入

サンプルコード

選択漏れを避けるために、ワンクリックコピー機能を使用することをお勧めします。

新しいものを作成して*.htmlコピーし。

<body>
    <section class="content">
        <div class="item">元素</div>
        <div class="item">元素</div>
        <div class="item">元素</div>
        <div class="item">元素</div>
        <div class="item">元素</div>
        <div class="item">元素</div>
        <div class="item">元素</div>
        <!-- <div class="item">元素</div> -->
    </section>
</body>

<style>
.content {
      
      
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;/* 替代space-between布局方式 */
}

.item {
      
      
    flex: 1;
    height: 120px;
    background-color: #cacaca;

    /* 间隙为5px */
    margin: 0 5px 5px 0;
    /* END */

    /* 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整 */
    width: calc((100% - 10px) / 3);
    /* END */

    /* 加入这两个后每个item的宽度就生效了 */
    min-width: calc((100% - 10px) / 3);
    max-width: calc((100% - 10px) / 3);
    /* END */
}

.item:nth-child(3n) {
      
      
    /* 去除第3n个的margin-right */
    margin-right: 0;
}
</style>

詳細についてはコードコメントを参照し、必要な効果を得るためにさらに変更とデバッグを行ってください。

序文

サンプルコード

Guess you like