Flex:1 の意味を解説

CSS Flexbox での flex: 1 の意味を日本語で解説

CSS Flexbox における flex: 1 というプロパティは、要素に柔軟性を与え、コンテナ内のスペースを均等に分配する役割を果たします。

具体的な意味:

• flex-basis: 0%: 要素の初期の幅または高さを指定します。この値は 0% のため、要素はデフォルトでコンテンツのサイズになります。
• flex-shrink: 1: コンテンツがコンテナよりも大きい場合、要素は均等に縮小されます。
• flex-grow: 1: 要素が成長できるスペースがある場合、そのスペースを均等に分配します。

簡単に言うと:

flex: 1 を設定すると、要素がコンテナ内のスペースを均等にシェアするようになります。

例:

.container {
  display: flex;
}

.item {
  flex: 1;
}

このコードでは、.container 要素が Flexbox コンテナとして設定され、その子要素である .item が flex: 1 を持つため、コンテナ内のスペースを均等に分割します。

.container {
  display: flex;
}

.item {
  flex: 1;
  border: 1px solid black;
}

例 2: 異なる幅の要素

.container {
  display: flex;
}

.item1 {
  flex: 2;
  border: 1px solid black;
}

.item2 {
  flex: 1;
  border: 1px solid black;
}

このコードでは、.item1 が flex: 2 を持ち、.item2 が flex: 1 を持つため、.item1 は .item2 の2倍の幅を占めます。コンテナ内のスペースは、.item1 と .item2 の比率に基づいて分配されます。

例 3: 柔軟なレイアウト

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1;
  border: 1px solid black;
}

このコードでは、.container に flex-wrap: wrap が設定されているため、コンテナの幅を超える要素は次の行に折り返されます。各 .item 要素は、行内のスペースを均等に分割します。

固定幅または高さ

• パーセンテージ
  

  .item {
    width: 50%;
    height: 25%;
  }
  

  この方法では、要素の幅と高さをコンテナのサイズに対するパーセンテージで指定します。
• 直接指定
  

  .item {
    width: 200px;
    height: 100px;
  }
  

  この方法では、要素の幅と高さを固定値で指定します。

グリッドレイアウト

• grid-template-columns と grid-template-rows
  

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 150px;
  }
  

  この方法では、グリッドコンテナ内のセルを定義し、要素を配置します。

フロート

• float: left または float: right
  

  .item {
    float: left;
  }
  

  この方法では、要素を左または右に配置し、他の要素を回り込ませます。ただし、フロートはレイアウトが複雑になる可能性があるため、慎重に使用してください。

インラインブロック

• display: inline-block
  

  .item {
    display: inline-block;
  }
  

  この方法では、要素をインライン要素のように配置し、幅と高さを指定することができます。