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

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

はじめに

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

CSS flexプロパティの構文

CSSのflexプロパティは、次のように記述します。

Selector {
    flex: /*値*/
}

flexプロパティには、主に以下の3つの値を組み合わせて指定できます。

  • flex-grow（伸長率）： 余ったスペースを他のアイテムとどう分配するかを決定します。デフォルト値は「0」です。
  • flex-shrink（縮小率）： コンテナの幅が不足した場合に、どれだけ縮小するかを決定します。デフォルト値は「1」です。
  • flex-basis（基本サイズ）： アイテムの初期サイズを指定します。ここにpxなどの具体的な値を設定することで、固定幅を実現できます。

例1：flex-basisによる固定幅の設定

以下の例では、1つ目のdiv要素に「flex: 0 20 20px;」を指定し、残りの2つには「flex: 1;」を適用しています。これにより、1つ目のアイテムは20pxの固定幅を保ちながら配置されます。

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                display: flex;
                padding: 4%;
            }
            .d1 {
                background: hotpink;
                flex: 0 20 20px;
            }
            .d2 {
                background: greenyellow;
                flex: 1;
            }
            .d3 {
                background: tomato;
                flex: 1;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <div class="d1"></div>
            <div class="d2"></div>
            <div class="d3"></div>
        </div>
    </body>
</html>

上記コードを実行すると、次のような出力結果になります。

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

ピンク色のアイテム（.d1）が固定幅を維持し、黄緑色（.d2）とオレンジ色（.d3）のアイテムが残りのスペースを均等に分け合っているのが確認できます。

例2：widthプロパティとの併用

次の例では、「66px」という固定幅をwidthプロパティで直接指定したアイテムと、自動的にリサイズされるアイテム（flex: auto）を混在させています。複数のスタイル（border、border-radiusなど）も併せて適用しています。

<!DOCTYPE html>
<html>
    <style>
        div {
            display: flex;
            border-radius: 2%;
            background-color: linen;
            height: 50px;
        }
        #d1 {
            border: 5px solid orangered;
            padding: 2%;
            flex: auto;
        }
        #d2 {
            border: 5px groove greenyellow;
            width: 66px;
        }
        #d3 {
            padding: 5%;
            border: 5px ridge hotpink;
        }
        #d4 {
            height: 100px;
            border: 5px solid magenta;
        }
    </style>
    <body>
        <div>
            <div id="d1">自動リサイズ</div>
            <div id="d2">66pxの固定幅</div>
            <div id="d3"></div>
        </div>
        <div id="d4">最後のDiv</div>
    </body>
</html>

上記コードを実行すると、次のような出力結果になります。

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

まとめ

CSSのflexプロパティを使えば、フレックスアイテムの伸縮性を細かくコントロールできます。「flex-basis」に具体的な数値を指定したり、widthプロパティと組み合わせたりすることで、レイアウトの中で特定のアイテムだけ固定幅を維持しつつ、他のアイテムに残りのスペースを柔軟に配分できます。サイドバーやナビゲーションなど、一部だけサイズを固定したいUIの実装にぜひ活用してみてください。

  1. CSSのposition: fixedで要素を固定表示する方法【実例コード付き】

    固定配置（Fixed Positioning）とは CSSでは、positionプロパティをfixedに設定することで、要素をユーザーのビューポート（ブラウザの表示領域）を基準に配置できます。fixedで配置された要素は、ページをスクロールしても画面上の同じ位置に留まり続けるのが最大の特徴です。位置の指定には、CSSの配置プロパティであるleft、right、top、bottomを使用します。 この特性を活かすことで、固定ヘッダーやナビゲーションバー、「ページトップへ戻る」ボタンなど、常に画面に表示させておきたいUI要素を簡単に実装できます。 例1：基本的な使い方 CSSの固定配置の具体的な

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

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