アジェンダ
基本的なdisplay: flex;でコンテンツにどのような変化をもたらすのかについてまとめます。
display: flex;によって起こる変化
display: flex; を設定すると、そのコンテナ内の子要素はフレックスアイテム（flex items）となります。
※これだけ!!
追加プロパティでフレックスアイテムを操作する
-
フレックスアイテムの方向指定:
flex-directionプロパティを使用して、フレックスアイテムの配置方向を指定します。行方向（横並び）や列方向（縦並び）を設定できます。 -
フレックスアイテムの配置:
justify-contentプロパティを使用して、フレックスアイテムをコンテナ内でどのように配置するかを指定します。中央寄せ、左右寄せ、スペースの均等分配などの配置方法があります。 -
フレックスアイテムの垂直方向の配置:
align-itemsプロパティを使用して、フレックスアイテムを垂直方向にどのように配置するかを指定します。中央寄せ、上寄せ、下寄せなどの配置方法があります。 -
サイズの自動調整:
flex-grow、flex-shrink、flex-basisプロパティを使用して、フレックスアイテムのサイズを自動調整できます。これにより、コンテナのサイズに応じてアイテムの幅や高さが動的に変わります。 -
順序の変更:
orderプロパティを使用して、フレックスアイテムの表示順序を変更できます。HTMLの順序に関係なく、見た目の順序を制御することができます。
具体例
具体例は以下のようになります。
HTML
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
CSS
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.item {
flex: 1;
padding: 10px;
margin: 10px;
background-color: lightgray;
}
上記の例では、.container に display: flex; を設定しています。これにより、以下のような変化が起きます。
- 子要素（
.item）がフレックスアイテムとなり、コンテナ内で中央に配置されます。 - フレックスアイテムは均等にスペースを取ります（
flex: 1;が設定されているため）。 - コンテナ全体の高さは100vh（ビューポートの高さ）で、アイテムは垂直方向にも中央に配置されます。
まとめ
このように、display: flex; を使うと、レイアウトが柔軟に変わり、コンテンツの表示方法が大きく変えることができます。