flex-glowでレスポンシブ対応にする

2022-01-30

flex-glowとは、ブラウザの余白を分割する

flexboxアイテムのトータルサイズが、コンテナのサイズより不足している場合にその余白をどのようにflex配分するかを設定できるプロパティ。

簡単にレスポンシブにするには

フレックスアイテムの値が、ブラウザ幅を変えても常に1:2:3にする方法

例

flex-container{
display: flex;

}
.flex-item1{
frex-glow： 1;
}

.flex-item2{
frex-glow： 2;
}

.flex-item3{
frex-glow： 3;
}

p{
flex-basis: 0;
}

flex-itemの全部に値を指定する時は、pで指定する。

flex-basisの値をゼロにする。