CSSのflexプロパティでフレックスアイテムのサイズや配置を制御し、柔軟なレイアウトを実現する方法をわかりやすく解説

CSSのflexプロパティは、フレックスボックスのアイテム（子要素）のサイズを決定する際に使用されます。要素の伸びや縮小、基準サイズを指定するために使います。

flexプロパティの値とその効果

flex: auto: アイテムが可能な範囲で伸び、縮小します。
flex: none: アイテムのサイズを固定し、伸びも縮小もしません。
flex: grow: アイテムが伸びやすい要素を指定します。数値が大きいほど成長します。
flex: shrink: アイテムが縮小しやすい要素を指定します。数値が大きいほど縮小します。

注意点と関連情報

flexプロパティは、3つのプロパティ(flex-grow, flex-shrink, flex-basis)の短縮形です。要素のサイズに基づいて、伸びや縮小が制御されます。

flexプロパティが効かない時の原因と対策

flex-basisが固定されている

flexプロパティでflex-basisを指定すると、その値に基づいて要素のサイズが決まります。もしflex-basisが固定されていると、要素が拡大や縮小せず、期待通りの動作が得られないことがあります。
対策: flex-basisを確認し、autoや0などの値に変更するか、必要に応じて適切な値を設定します。これにより、要素がフレックスコンテナ内で適切に調整されるようになります。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 800px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #333;
        background-color: #f9f9f9;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .css-sample-item {
        background-color: #d9eaff;
        padding: 10px;
        border: 1px solid #333;
        text-align: center;
        width: 100px;
        height: 100px;
        box-sizing: border-box;
    }

flex: auto

flex: autoはアイテムが可能な限り伸び、縮小します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-flex-auto">Auto 1</div>
    <div class="css-sample-item css-sample-flex-auto">Auto 2</div>
</div>

CSSコード

.css-sample-flex-auto {
    flex: 1 1 auto;
}

表示結果

Auto 1

Auto 2

flex: none

flex: noneはアイテムのサイズを固定し、伸びも縮小もしません。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-flex-none">None 1</div>
    <div class="css-sample-item css-sample-flex-none">None 2</div>
</div>

CSSコード

.css-sample-flex-none {
    flex: 0 0 auto;
}

表示結果

None 1

None 2

flex: 2

flex-growを使うと、アイテムが伸びやすい要素を指定できます。数値が大きいほど伸びます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-flex-grow">Grow 1</div>
    <div class="css-sample-item css-sample-flex-grow">Grow 2</div>
</div>

CSSコード

.css-sample-flex-grow {
    flex: 2;
}

表示結果

Grow 1

Grow 2

flex: 1 0 50px

flex-shrinkを使うと、アイテムが縮小しやすい要素を指定できます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-flex-shrink">Shrink 1</div>
    <div class="css-sample-item css-sample-flex-shrink">Shrink 2</div>
</div>

CSSコード

.css-sample-flex-shrink {
    flex: 1 0 50px;
}

表示結果

Shrink 1

Shrink 2

まとめ

CSSのflexプロパティは、フレックスボックスで要素の伸びや縮小、基準サイズを効率的に制御できる強力なツールです。複数の値を組み合わせて、要素のサイズを自在にコントロールしましょう。