CSSのdisplay:flex（flexbox）を使うときの注意点

CSSのdisplay:flexの基本

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がうまく働かず、繰り返したカードが横に並んでしまう場合、確認してみるといいかと思います。 特に、自分で実装したものではなくて、人が実装したものを引き継いだ時なんかにうまく描画されないと、原因を探すのに一苦労しますね。