flex-basis と width の違い
◆ flex-grow, flex-shrink 使うときは
◆ width じゃなくて flex-basis の方を設定するか
◆ flex-basis に auto を設定する
◆ basis をもとに伸縮してくれる
◆ width じゃなくて flex-basis の方を設定するか
◆ flex-basis に auto を設定する
◆ basis をもとに伸縮してくれる
これまで特に気にせず基本は width だったのですが 縮めるときは width だと困りました
これだと
![]()

flex:none にすれば
![]()

margin 分 はみ出てしまいます
これをいい感じに縮めてもらおうと flex: 0 1; を指定してるのですが 上のように必要以上に縮んでしまいます
そういえば width みたいなもので flex-basis というのがあったので こういうときに使えばいいのかも とやってみると
![]()

無事目的達成できました
flex-basis に auto をつければ width 指定でも同じ見た目にできました
<div class="parent" style="width: 300px; height: 200px; background: khaki;">
<div class="left" style="background: beige;">Left</div>
<div class="right" style="background: powderblue;">Right</div>
</div>
<style>
.parent{
display: flex;
}
.left, .right{
flex: 0 1;
margin: 10px;
}
.left{
width: 40%;
}
.right{
width: 60%;
}
</style>
これだと

flex:none にすれば

margin 分 はみ出てしまいます
これをいい感じに縮めてもらおうと flex: 0 1; を指定してるのですが 上のように必要以上に縮んでしまいます
そういえば width みたいなもので flex-basis というのがあったので こういうときに使えばいいのかも とやってみると
.left{
flex-basis: 40%;
}
.right{
flex-basis: 60%;
}

無事目的達成できました
追記
flex-basis を省略して 0 になっていたのが原因で width の幅じゃなくて内側要素に必要な最小幅から縮めようとしていたようですflex-basis に auto をつければ width 指定でも同じ見た目にできました
COMMENT
コメント一覧 (2)
-
- 2018/12/10 13:17
-
間違いというわけではないのですが、
> flex-grow, flex-shrink 使うときは width じゃなくて flex-basis の方を設定する
という言い回しがこの記事を読んだ方に誤解を与えるといけないのでコメントさせていただきます。
最初のCSSで幅が無視されて小さく表示されてしまうのはwidthに指定しているからというより、flex-basisが0になっているからと言ったの方が正確な気がします。`flex 0 1`としてした場合flex-basisは0になるようです。
flex-basisをauto、つまり`flex 0 1 auto`と指定すればwidthでも期待した通りになると思います。
> basis をもとに伸縮してくれる
こちらはご指摘の通りで、flex-basisはflexアイテムのgrow/shrinkを計算するために使われる元となるサイズです。autoにしておけばそのアイテムのwidthを元に計算されます。
flexの幅の計算方法はこちらが詳しいです。
http://memowomome.hatenablog.com/entry/2016/09/06/080000
-
- 2018/12/10 16:54
-
ななしさん
コメントありがとうございます
auto がデフォルトじゃなかったのですね
デフォルトが 0 で grow を許可せず shrink のみ許可なので最小サイズというので理解できます
(前にもこの辺のデフォルトにやられた覚えが……)