【レスポンシブ】flexbox_2行目の要素を右寄せにする方法

Question

検索の仕方が悪いのか、出てこなかったのでご質問です。
レスポンシブでflexboxの使い方で、2行目の要素を右寄せにする方法をご存知でしたら教えてください。

図を見て頂ければ、分かりやすいと思うのですが
タブレットで見た際に、4個目のコンテンツを3個目の要素の下に配置したいのです。

●HTML
<div class="flexbox">
<div class="item">コンテンツ①</div>
<div class="item">コンテンツ②</div>
<div class="item">コンテンツ③</div>
<div class="item">コンテンツ④</div>
</div>

●CSS
@media screen and (orientation: portrait) {
.flexbox{display:flex;}

}

flex-wrapで折り返す際、2行目は左から始まってしまうのでどうしたものかと…悩んでいます。

Answer 1

justyify-contentを指定してみてはいかがでしょう。

【Flexboxで、要素の左右中央寄せ、均等割り、右寄せ（justyify-content）の方法 | レンタルサーバーのCPIスタッフブログ】
https://shared-blog.kddi-web.com/webinfo/169

Comments

[famous]

ありがとうございます！詳しい解説を載せて下さって大変お勉強になりました。

Answer 2

flex-wrap: wrap;とjustify-content: flex-end;をつければできると思います！

Comments

[famous]

ありがとうございます！速攻で解決しました！