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

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

CSS Flexbox（フレックスボックス）モデルは、従来のCSSボックスモデルを改善するために考案されました。Flexboxモデルには、ボックスモデルの主要な要素（margin、padding、border、content）がそのまま含まれていますが、さらに柔軟性が加わり、コンテナ（親要素）の中に子要素を最適な形で配置できるようになっています。

このチュートリアルでは、Flexboxモジュールの基本をわかりやすく解説し、よりレスポンシブなサイト制作に役立てられるようサポートします。

以下は、基本的なFlexboxモデルのデモ用スターターコードです。解説を読みながら、実際にコードを動かしてみてください。

<!DOCTYPE html>
  <head>
    <title>Flexbox</title>
    <style>
       * {
        	box-sizing: border-box;
        	font-family: 'Roboto'
       }
      .parent-container {
        	height: 700px;
        	background: green;
        	width: 700px;
        	padding: 20px;
      }
      .child-item {
        	height: 200px;
        	width: 200px;
        	margin: 0px;
        	padding: 20px;
      }
      .child-item:first-child {
        background: orange;
      }
      .child-item.one {
        background: purple;
      }
      .child-item.two {
        background: aliceblue;
      }
      .child-item.three {
        background: grey;
      }
      .child-item.four {
        background: pink;
      }
      .child-item.five {
        background: yellowgreen;
      }
      .child-item.six {
        background: red;
      }
      .child-item.seven {
        background: blanchedalmond;
      }
      .child-item.eight {
        background: white;
      }
      .child-item.nine {
        background: lightblue;
      }
      .child-item:last-child {
        background: yellow;
      }
	</style>
 </head>
 <body>
  	<div class="parent-container">
		<div class="child-item">Lisa Simpson</div>
        	<div class="child-item one">Bart Simpson</div>
        	<div class="child-item two">Maggie Simpson</div>
        	<div class="child-item three">Homer Simpson</div>
        	<div class="child-item four">Marge Simpson</div>
        	<div class="child-item five">Grampa Simpson</div>
        	<div class="child-item six">Santa's Little Helper</div>
        	<div class="child-item seven">Apu Nahasapeemapetilon</div>
        	<div class="child-item eight">Moe Szyslak</div>
        	<div class="child-item nine">Ned Flanders</div>
        	<div class="child-item ten">Snowball II</div>
    </div>

	<script src="" async defer></script>
 </body>
</html>

親コンテナ（フレックスボックス）のプロパティ

display: flex

displayプロパティには、コンテナを画面上に配置するためのさまざまな値があります。block、inline-block、none、hidden、inlineなどはすでに見たことがあるかもしれませんが、ここで注目するのはflexという値です。

まず、大きな容器——宝箱、おもちゃ箱、段ボール箱などを思い浮かべてください。そして、その中に物を入れるイメージを持ってみましょう。この大きな容器が親（parent）、つまりフレックスボックスであり、中に入れる小さなアイテムが子（children）、つまりフレックスアイテムです。

親コンテナにdisplay:flexを追加すると、このプロパティはそのコンテナ自体にのみ適用されます。子要素はこのプロパティを継承しません（ただし、子要素自身のコンテナに対してflexを使えば、その子孫要素に影響を与えることはできます）。

このプロパティを指定することで、従来は使えなかったさまざまなプロパティが利用可能になります。flex-direction、justify-content、align-items、align-self、flex-wrap、flex-flowなどです。

上のコードエディタを実行してみてください。現時点では、大きな緑色の親コンテナと、その中に11個の子コンテナが表示されているはずです。

子コンテナが縦に積み重なって表示されるのは、デフォルトがdisplay: blockだからです。display: blockを使うと、コンテナはその行全体を占有します。マージンのデフォルト値が親コンテナの幅いっぱいに広がるため、子コンテナ同士が縦に積み重なってしまうのです。

一方、display: flexを使えば、floatやvertical-alignといった古いボックスモデルのプロパティに頼ることなく、親コンテナ内の子コンテナを自由自在に配置できます。

コードエディタのstyleタグ内のCSSにdisplay: flexを追加して、親コンテナのCSSを次のようにしてみましょう。

.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
display: flex;

.parent-containerにdisplay: flexを追加すると、子コンテナの配置方向が変化します。保存すると、子コンテナが横並びに表示されているのがわかるでしょう。

display: blockの代わりにdisplay: flexを使うと、デフォルトのマージンが0に設定されます。あとは自由に調整できます！

flex-direction

flex-directionプロパティは、コンテナの主軸（メイン軸）を設定します。フレックスコンテナのデフォルト値はrow（行）です。display:flexで親コンテナを設定する際、コンテンツを縦方向（カラム）にしたい場合を除き、flex-directionを明示的に指定する必要はありません。

デフォルトの方向では、主軸は左から右、交差軸（クロス軸）は上から下になります。以下の図をご覧ください。

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

コードエディタの.parent-containerにflex-direction: columnを追加してみましょう。実行するとどうなるでしょうか？

flex-directionをcolumnに切り替えると、軸が反転します。それまで主軸だったものが交差軸になり、交差軸だったものが主軸になります。以下のように図示できます。

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

その結果、例の中の子コンテナも軸が反転し、再び縦に積み重なって表示されます。

flex-directionについて最も覚えておくべきことは、主軸の方向がflex-directionプロパティの値に対応するということです（columnなら上から下、rowなら左から右）。

justify-contentは主軸方向の間隔を制御し、align-itemsは交差軸方向の間隔を制御します。これらについては後ほど詳しく説明します。

flex-directionには他にも2つの値があります。row-reverseとcolumn-reverseです。これらはrowやcolumnとよく似ていますが、フレックスアイテムが逆順に配置されます。row-reverseの場合は右から左へ、column-reverseの場合は下から上へ配置されます。

これらの値が活躍するのは、Web版とモバイル版・タブレット版で異なるレイアウトや順序にしたい場合です。

flex-wrap

ここまで、display: flexが親の子コンテナにどのような影響を与えるか、そして子コンテナを行または列として配置する方法を学びました。では、親コンテナのスペースが足りなくなったらどうなるでしょうか？そして、それをどう解決すればよいのでしょうか？

答えはflex-wrapというプロパティです。デフォルトでは、flex-wrapはnowrapに設定されています。これは、子コンテナが親コンテナからはみ出し、望ましくないレイアウト崩れを引き起こす可能性があることを意味します。.parent-containerにflex-wrap: wrap;を追加して、何が起こるか見てみましょう。

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

コンテナのレイアウトがかなりきれいになりましたね。flex-wrapはすべての子要素を横並びに配置していき、親コンテナの幅に達したら次の行に移動して、さらに子コンテナを追加していきます。これをすべてのコンテナが表示されるまで繰り返します。

flex-wrapにはnowrap、wrap、wrap-reverseの3つの値があります。wrap-reverseはwrapと同じですが、上から下ではなく下から上へ流れる点が異なります。

flex-flow

flex-flowは、flex-directionとflex-wrapを一括指定できるショートハンドプロパティです。flex-directionをcolumn、flex-wrapをwrapにしたい場合は、flex-flow: column wrapと記述します。デフォルト値はflex-flow: row nowrapです。

justify-content

justify-contentプロパティは、親コンテナの主軸に沿った配置を制御します。スペースを自分で計算することなく、flex-itemsを主軸全体に分散させることができます。justify-contentで最もよく使われる6つの値は、flex-start（デフォルト）、flex-end、center、space-around、space-between、space-evenlyです。

flex-start:

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

flex-end:

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

center:

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

space-around:

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

space-between:

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

space-evenly:

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

align-items

align-itemsとjustify-contentの最大の違いは、子コンテナを分散させる軸が異なることに加えて、デフォルト値にあります。思い出してください。justify-contentのデフォルト値はflex-startでした。しかしalign-itemsの場合はそうではありません。代わりに、デフォルト値はstretch（伸長）です。

説明するために、ページ上部のコードエディタに戻り、.child-containerのwidthとheightを削除してみましょう。display: flexとflex-directionはすでに設定済みです。flex-direction: rowとflex-direction: columnを切り替えて、サイズの制約がない状態でコンテナがどのように振る舞うか確認してみてください。期待通りの結果になりましたか？

align-itemsのルールが設定されていない場合、子コンテナは交差軸方向に親コンテナのサイズまで引き伸ばされます。しかし、親コンテナにalign-itemsプロパティを設定すると、子コンテナのサイズは自動的に、コンテンツのサイズ＋padding＋borderに合わせて調整されます。

align-items: stretch

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

align-items: center

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

justify-contentで説明した他のすべての値は、align-itemsでも同じ意味で使用できます。ただし、対象となる軸が入れ替わる点だけが異なります。

子コンテナ（フレックスアイテム）のプロパティ

order

通常、親コンポーネント内のコンテナの順序は、HTMLファイルに記述された順序に従います。しかし、コンテナの順序を制御したい場合——たとえば、モバイルデバイスでは別の子コンテナを先に表示したい場合——は、orderプロパティを使うことで実現できます。このプロパティは数値で、子コンテナを画面に表示する際の順序を示します。

align-self

align-selfを使用すると、デフォルトの配置、またはalign-itemsで設定された配置を上書きできます。なお、align-selfが機能するのは、親がdisplay: flexである場合のみです。align-selfの値には、flex-start、flex-end、baseline、stretchが指定できます。

まとめ

このチュートリアルでは、フレックスボックスモデルの基本を学びました。Flexboxは、親コンテナとその子コンテナの関係によって成り立っていることがわかりました。親のフレックスボックスプロパティは、親の空きスペースにおける子コンテナの動きに直接影響します。

flex-direction、justify-content、align-items、flex-wrapを使って親の中の子要素の位置を操作し、orderとalign-selfを子側で使うことで、親に設定されたデフォルトやルールを上書きできます。

ぜひコードエディタを使って、これらのプロパティをいろいろ試してみてください。あなたはFlexboxのエキスパートへの道を順調に進んでいます！

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

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

  2. CSS Flexboxでアイテムに固定幅を設定する方法

    はじめにCSSのflexプロパティは、フレックスコンテナ内のアイテムのサイズを柔軟に制御できる強力なツールです。このプロパティを活用することで、アイテムを自由に伸縮させたり、逆に固定幅を維持させたりすることが可能になります。本記事では、flexプロパティの基本的な構文と、実際のコード例を通じて、フレックスアイテムに固定幅を設定する方法を詳しく解説します。 CSS flexプロパティの構文 CSSのflexプロパティは、次のように記述します。 Selector {     flex: /*値*/ } flexプロパティには、主に以下の3つの値を組み合わせ