CodeGym /Javaコース /Frontend SELF JA /スペースの分配

スペースの分配

Frontend SELF JA

レベル 17 , レッスン 5

使用可能

9.1 プロパティ flex-grow

Flexboxでは、Flexコンテナ内の要素間の空間を管理するためのさまざまなツールが用意されてるんだ。flex-grow, flex-shrink, flex-basisのプロパティは、Flex要素のサイズと動作をさまざまな条件で制御するために重要な役割を果たしてるよ。これらのプロパティとその使い方について詳しく見ていくよ。

flex-growプロパティは、Flex要素がコンテナ内の利用可能な空間を占めるためにどの程度成長できるかを決定するんだ。flex-growの値は、他のFlex要素と比較してどれだけ要素が拡大できるかを示す係数だよ。

値:

整数または小数の値
デフォルト値: 0 (要素は成長しない)

使用例:

CSS

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 500px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .grow-1 {
        flex-grow: 1;
      }

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

HTML

    
      <div class="container">
        <div class="item grow-1">エレメント 1</div>
        <div class="item grow-2">エレメント 2</div>
        <div class="item grow-1">エレメント 3</div>
      </div>

コードの説明:

.grow-1: これらの要素はflex-grow: 1;の値を持つから、均等に成長できるよ。
.grow-2: この要素はflex-grow: 2;の値を持ち、flex-grow: 1;を持つ要素と比べて2倍成長できる。

9.2 プロパティ flex-shrink

flex-shrinkプロパティは、コンテナ内の空間が限られている場合にFlex要素がどの程度縮小できるかを決定するんだ。flex-shrinkの値は、他のFlex要素と比較してどれだけ要素が縮小できるかを示す係数だよ。

値:

整数または小数の値
デフォルト値: 1 (要素は縮小できる)

使用例:

CSS

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
        width: 300px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
        width: 150px;
      }

      .shrink-0 {
        flex-shrink: 0;
      }

      .shrink-1 {
        flex-shrink: 1;
      }

HTML

    
      <div class="container">
        <div class="item shrink-0">エレメント 1</div>
        <div class="item shrink-1">エレメント 2</div>
        <div class="item shrink-1">エレメント 3</div>
      </div>

コードの説明:

.shrink-0: この要素はflex-shrink: 0;の値を持ち、縮小が許可されてない。
.shrink-1: これらの要素はflex-shrink: 1;の値を持ち、必要に応じて縮小できる。

9.3 プロパティ flex-basis

flex-basisプロパティは、自由な空間の分配前のFlex要素の初期サイズを決定するんだ。ピクセル、パーセンテージなど、さまざまな単位で指定できるよ。

値:

さまざまな単位での長さ (px, %, emなど)
デフォルト値: auto (サイズはコンテンツによって決定される)

使用例:

CSS

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

      .basis-auto {
        flex-basis: auto;
      }

      .basis-100px {
        flex-basis: 100px;
      }

      .basis-50percent {
        flex-basis: 50%;
      }

HTML

    
      <div class="container">
        <div class="item basis-auto">エレメント 1</div>
        <div class="item basis-100px">エレメント 2</div>
        <div class="item basis-50percent">エレメント 3</div>
      </div>

コードの説明:

.basis-auto: この要素はflex-basis: auto;の値を持ち、サイズはコンテンツによって決定される。
.basis-100px: この要素は固定された初期サイズ100ピクセルを持つ。
.basis-50percent: この要素はコンテナの幅の50%の初期サイズを持つ。

9.4 プロパティの使用

flexプロパティはflex-grow, flex-shrink, flex-basisを設定するためのショートハンドなんだ。一つのプロパティでスペースの分配の3つの側面すべてを管理できるんだよ。

構文:

    
      .container {
        flex: [flex-grow] [flex-shrink] [flex-basis];
      }

使用例:

CSS

    
      .container {
        display: flex;
        border: 2px solid #000;
        padding: 10px;
      }

      .item {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 5px;
      }

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

      .flex-2 {
        flex: 2 1 100px;
      }

      .flex-3 {
        flex: 1 0 50%;
      }

HTML

    
      <div class="container">
        <div class="item flex-1">エレメント 1</div>
        <div class="item flex-2">エレメント 2</div>
        <div class="item flex-3">エレメント 3</div>
      </div>

コードの説明:

.flex-1: この要素はflex: 1 1 auto;の値を持ち、他の要素と均等に成長縮小でき、初期サイズはコンテンツで決定される。
.flex-2: この要素はflex: 2 1 100px;の値を持ち、flex-grow: 1;を持つ要素と比べて2倍の成長が可能で、100ピクセルの初期サイズを持つんだ。
.flex-3: この要素はflex: 1 0 50%;の値を持ち、成長することができる一方で縮小はできず、コンテナ幅の50%の初期サイズを持つ。

前へ前のレッスン

次へ次のレッスン

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION