.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は、フレックスアイテムが親要素内の利用可能なスペースをどれだけ占有するかを指定するプロパティです。デフォルト値は0で、値が大きいほど他のアイテムに対して多くのスペースを占有します。
flex-shrinkは、フレックスアイテムが親要素のサイズを超えた場合に、どれだけ縮小するかを指定します。デフォルト値は1で、値が大きいほどそのアイテムは他のアイテムに比べてより多く縮小されます。
flex-basisは、フレックスアイテムの初期サイズを設定するプロパティです。デフォルト値はautoで、アイテムの内容に基づいてサイズが決まります。具体的な長さやパーセンテージで指定することができます。