flex で幅を比率で設定する

● flex で 幅を 比率 2 : 5 で設定する場合

.container {
  display: flex
}

.boxA{
  /* flexはflex-grow、flex-shrink、flex-basisの省略形です */
  flex: 2 1 0%;
}


.boxb{
  /* flexはflex-grow、flex-shrink、flex-basisの省略形です */
  flex: 5 1 0%;
}

flex-grow

flex-growは、フレックスアイテムが親要素内の利用可能なスペースをどれだけ占有するかを指定するプロパティです。デフォルト値は0で、値が大きいほど他のアイテムに対して多くのスペースを占有します。

flex-shrink

flex-shrinkは、フレックスアイテムが親要素のサイズを超えた場合に、どれだけ縮小するかを指定します。デフォルト値は1で、値が大きいほどそのアイテムは他のアイテムに比べてより多く縮小されます。

flex-basis

flex-basisは、フレックスアイテムの初期サイズを設定するプロパティです。デフォルト値はautoで、アイテムの内容に基づいてサイズが決まります。具体的な長さやパーセンテージで指定することができます。

No.2581
01/19 14:37

edit