CSSのdisplay:flex(flexbox)を使うときの注意点
CSSのdisplay:flexの基本
親divに、 display: flex
をつける。
その直下の子1(左)に flex-basis: 30%
、 子2(右)に flex-basis: 70%
をつけると、うまいことフレックスで動いてくれる。
card /* 親 */ display flex width 100% body /* 子2 */ width 100% display block img /* 子1 */ display block flex-basis 30% float left background-size cover background-repeat no-repeat background-position center center
詳しい使い方はお調べください。(参考サイト)
間違えたパターン
上記のような、3:7で自動で調整してくれるflexboxを採用したカードを、データの数だけ縦に繰り返す形を作ろうと思った。
実際には、Vue.jsの v-for
で取得したデータの数だけカードを縦に繰り返す形としようとした。
そうしたところ、なぜか以下のような並び方になってしまった。
どういうものかというと、複数縦に並ぶカード全てを包括する 親(コンテナ)
に、カードの横幅がすごく小さくなったものがずらずらと横に並んでしまったのだ。
悩んだのだが、原因は、 親(コンテナ)
に、 display: flex
をつけてしまっていたことだったと分かった。
親(コンテナ)
の下に、 flex-basis
がついたものが、並んでしまったということのようでした。
結論としては、display: flex
の直下に、 flex-basis: XX%
をつける子要素がないといけないということを肝に命じておく必要があると思いました。
大変基本的すぎる間違いですが、もしも、flexboxがうまく働かず、繰り返したカードが横に並んでしまう場合、確認してみるといいかと思います。 特に、自分で実装したものではなくて、人が実装したものを引き継いだ時なんかにうまく描画されないと、原因を探すのに一苦労しますね。