CSSのflexプロパティでフレックスアイテムのサイズを制御する方法
CSSでフレックスボックスレイアウト内のアイテム（フレックスアイテム）の寸法を制御するには、flexプロパティを使用します。flexプロパティは「flex-grow」「flex-shrink」「flex-basis」の3つの値をまとめて指定できるショートハンドプロパティで、各アイテムがコンテナ内でどのように伸縮するかを細かく設定できます。
flexプロパティの基本構文
flex: flex-grow flex-shrink flex-basis;
- flex-grow： 余ったスペースを他のアイテムと比べてどれだけ多く受け取るかを指定します（初期値：0）。
- flex-shrink： スペースが不足している場合に、どれだけ縮小するかを指定します（初期値：1）。
- flex-basis： アイテムの基本となるサイズを指定します。autoを指定すると、widthやheightの値が基準になります。
サンプルコード
以下は、3つのdiv要素を持つフレックスコンテナに対して、最初の要素だけflexプロパティを適用し、寸法の伸縮を制御する例です。
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
display: flex;
width: 100%;
}
div {
width: 200px;
height: 200px;
color: white;
text-align: center;
font-size: 30px;
}
.first {
background-color: rgb(55, 0, 255);
flex: 2 1 auto;
}
.second {
background-color: red;
}
.third {
background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>フレックスアイテムの寸法制御</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>
コードの解説
この例では、.firstクラスにflex: 2 1 auto;を指定しています。これは以下の意味を持ちます。
- flex-grow: 2 — コンテナ内に余白がある場合、他のアイテムの2倍の割合で幅が広がります。
- flex-shrink: 1 — スペースが不足した場合は通常の比率で縮小します。
- flex-basis: auto — 基本サイズはwidthプロパティで指定した200pxが基準になります。
そのため、表示結果では青色の「First Div」が赤色・紫色の要素よりも大きく表示され、残りの2つの要素は指定された200pxのまま並びます。
実行結果
上記のコードを実行すると、次のような出力が得られます。
このようにflexプロパティを使いこなすことで、画面幅に応じて柔軟に伸縮するレスポンシブなレイアウトを簡単に構築できます。
-
CSSでフレックスアイテムをコンテナの中央に揃える方法
CSSでフレックスアイテム（flexアイテム）をコンテナの中央に配置したい場合は、justify-content プロパティに center を指定します。このプロパティは、主軸（デフォルトでは水平方向）に沿ってフレックスアイテムをどのように配置するかを制御するもので、center を設定すると余白が均等に分配され、アイテム全体がコンテナの中央にまとまります。justify-content の基本的な使い方親要素に display: flex; を適用したうえで、justify-content: center; を追加するだけで、子要素が中央寄せされます。以下は代表的な指定例です。.mycon
-
CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)
CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り