Flexboxでの比率設定について

はじめに

webサイトの模写でFlexboxを使用した際に横並びの要素を1:2で配置する方法について調べました。
今回は'flex-grow',　'flex-shrink',　'flex-basis'の3つのプロパティについて紹介します。

flex-grow

'flex-grow'は、フレックスアイテムが親コンテナ内で利用可能な余分なスペースをどの程度拡大するかを指定するプロパティです。

.content {
  width: 800px;
  display: flex;
}
  
.item1 {
  flex-grow: 1; /* 他のアイテムと比べて1倍のスペースを取る */
}
.item2 {
  flex-grow: 2;/* 他のアイテムの2倍のスペースを取る */
}

flex-shrink

'flex-shrink'は、親コンテナ内のスペースが不足したときに、フレックスアイテムがどの程度縮小するかを指定します。

.content {
  width: 800px;
  display: flex;
}
.item1 {
  flex-shrink: 1; /* スペースが不足したときに縮小する */
}
.item2 {
  flex-shrink: 0; /* 縮小しない */
}

flex-basis

'flex-basis'は、フレックスアイテムの初期サイズを指定します。'flex-grow'や'flex-shrink'が適用される前の基準となるサイズです。

.item {
  flex-basis: 100px; /* アイテムの初期サイズを100pxに設定 */
}

まとめ

いかがだったでしょうか？Flexboxを使用すると、要素の比率を簡単に管理できます。ですが、単純な比率ではないため、各プロパティをしっかり理解して意図しない挙動を避けるように気をつけましょう。