CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのalign-contentプロパティを使ってflex-wrapの動作を変更する方法

CSSでは、align-contentプロパティを活用することで、flex-wrapプロパティによる折り返し動作を細かく制御できます。フレックスコンテナ内で複数行に折り返されたアイテム同士の間隔や配置を調整したい場合に非常に便利です。

align-contentプロパティとは

align-contentは、フレックスコンテナ内の各行(ライン)を交差軸方向にどのように配置するかを指定するプロパティです。flex-wrap: wrapが設定されているコンテナと組み合わせることで、折り返されたアイテム間のスペース配分を自由にコントロールできます。

主な値には以下のようなものがあります。

  • space-between: 最初の行と最後の行を両端に揃え、残りの行を均等に配置
  • space-around: 各行の前後に均等なスペースを確保
  • center: 全ての行を中央にまとめて配置
  • flex-start: 行を交差軸の開始位置に寄せて配置
  • flex-end: 行を交差軸の終了位置に寄せて配置

実装例

以下のコードでは、flex-wrap: wrapとalign-content: space-betweenを組み合わせて、折り返されたアイテムの配置を制御しています。実際にブラウザで実行して、動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            align-content: space-between;
            height: 150px;
            width: 600px;
            flex-wrap: wrap;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
      <div class = "mycontainer">
         <div>Q1</div>
         <div>Q2</div>
         <div>Q3</div>
         <div>Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
      </div>
   </body>
</html>

コードの解説

このサンプルでは、幅600px・高さ150pxのオレンジ色のフレックスコンテナの中に、幅100pxの白いボックス(Q1〜Q8)を配置しています。各ボックスの合計幅がコンテナの幅を超えるため、アイテムは自動的に複数行へ折り返されます。

ここでalign-content: space-betweenを指定しているため、折り返しによって生成された行同士が、上下いっぱいに均等分散されて表示されます。この値をcenterなどに変更すると、行が中央に集まるなど、レイアウトの変化を簡単に確認できます。

まとめ

flex-wrapだけでも折り返し自体は可能ですが、align-contentを組み合わせることで、複数行になった際の縦方向の配置や余白の配分まで柔軟に設計できます。レスポンシブ対応のレイアウトを作成する際にぜひ活用してください。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ