CSSで「display:flex;」とレスポンシブで起きる二行目の問題。

CSSで「display:flex;」を使ったとき、二行目の左右の位置とか、均等な余白での幅調整がどうしてもうまくいかないの。

何か良い方法ない？

お答えします！

レスポンシブデザインを意識した中で、display:flexを使うと、２行目のレイアウトがなかなか思うようにいかないことが多いです。

ul {
 display:flex;
 flex-wrap:wrap;
}
ul li:nth-of-type(1) {
 flex-basis:50%;
}
ul li:nth-of-type(2) {
 flex-basis:50%;
}
ul li:nth-of-type(3) {
 flex-basis:80%;
}

上記のように「flex-wrap:wrap;」で100%を超えたときは折り返すように指定して、ブロック一つずつにflex-basisで幅を指定するようにしてみてください。

パソコン・タブレット・スマホをメディアクエリを使って振り分ける手間は増えますが、nth-child(odd)やnth-child(even)のような偶数・奇数も活用すれば、イメージ通りのレイアウトができるはずです。