flex-glowでレスポンシブ対応にする
Contents
flex-glowとは、ブラウザの余白を分割する
flexboxアイテムのトータルサイズが、コンテナのサイズより不足している場合にその余白をどのようにflex配分するかを設定できるプロパティ。
簡単にレスポンシブにするには
フレックスアイテムの値が、ブラウザ幅を変えても常に1:2:3にする方法
例
![](https://i0.wp.com/hoge-hoge.com/wp-content/uploads/2022/01/a1b4f78d0d28d679c68334e451794096.jpg?resize=486%2C166&ssl=1)
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の値をゼロにする。
ディスカッション
コメント一覧
まだ、コメントがありません