MENU
  1. ホーム
  2. CSS装飾パーツ
  3. 【CSS】自動でカラム調整されるflexboxレイアウト

【CSS】自動でカラム調整されるflexboxレイアウト

CSS装飾パーツ 管理人ピックアップ記事
Kizineko（COPPY管理人）
CSS　自動カラム落ち　Flexbox　レイアウト
  • URLをコピーしました！
目次（クリックでジャンプ）

自動でカラム調整されるflexboxレイアウト

同じ横幅の要素を並べ、親要素に収まりきらなくなったら下にカラム落ちさせるコードです。

HTML

<div class="list">
   <div class="list__item">
      ここにコンテンツ
   </div>
   <div class="list__item">
      ここにコンテンツ
   </div>
   <div class="list__item">
      ここにコンテンツ
   </div>
</div>

CSS（SCSS）

下記コードはSCSSで記述しています。CSSでコードを使いたい方は、手動またはツール等でCSSに変換して使ってください。
・オンラインSCSS→CSSコンバーター
・SCSSをCSSにリアルタイムで変えるツール

list {
   display: flex;
   justify-content: center;
   gap: 2rem;
   flex-wrap: wrap;
    &__item {
        width:200px;
    }
}

適宜カスタマイズしてご活用ください。

おすすめのフリーランス向け求人・案件探しサービス

高単価案件、週3日～などフレキシブルな働きが可能な事が特徴の転職サービスです。案件をチェックするだけであれば無料の為、エンジニアやデザイナーの方は是非登録してみてください。

4275件と案件数豊富です（2024年4月現在）
まずはかんたん無料登録してみる
CSS装飾パーツ 管理人ピックアップ記事
CSS　自動カラム落ち　Flexbox　レイアウト

この記事が気に入ったら
フォローしてね！

役に立った！と思ったらシェアお願いします
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

Kizineko（COPPY管理人）のアバター Kizineko（COPPY管理人） Webデザイナー

フリーランスのWebデザイナー「Kizineko」です。Webサイトのデザイン～コーディング、簡易的なプログラム実装等、Web制作に係る広くに携わっております。当ブログでは日々のメモ帳として便利なコードなどを共有しております。

この著者の記事一覧へ

関連記事

目次（クリックでジャンプ）