ここから本文です

display:flexで横並びになった要素を、任意の位置で改行させる方法はありますか? ...

dob********さん

2017/1/2622:49:01

display:flexで横並びになった要素を、任意の位置で改行させる方法はありますか?

例えば
■■■■■

■■
■■■
みたいに。

閲覧数:
2,444
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

ken********さん

2017/1/2708:56:48

flexコンテナ(親要素)とflexアイテム(子要素)に幅を指定し、flexコンテナの枠内に入るよう改行して表示する方法ぐらいしか思いつきませんね。



■■■
■■の場合

【HTML】
<div class="flexbox">
<div class="f_item">1</div>
<div class="f_item">2</div>
<div class="f_item">3</div>
<div class="f_item">4</div>
<div class="f_item">5</div>
</div>

【CSS】
.flexbox {
display:flex;
flex-wrap:wrap;
width:360px;
border:3px solid red;
}
.f_item {
width:120px;
background-color:black;
color:white;
text-align:center;
}





■■
■■■の場合

【HTML】
<div class="flexbox">
<div class="f_item">3</div>
<div class="f_item">4</div>
<div class="f_item">5</div>
<div class="f_item">1</div>
<div class="f_item">2</div>
</div>

【CSS】
.flexbox {
display:flex;
flex-wrap:wrap-reverse;
width:360px;
border:3px solid red;
}
.f_item {
width:120px;
background-color:black;
color:white;
text-align:center;
}

質問した人からのコメント

2017/1/27 10:58:43

display:flexは便利ですが、そこまで万能じゃないんですね。。。

ですが、wrap-reverseはいいですね!完全に忘れていました。
orderと組み合わせればhtml側で1〜5を正しい順番のまま分割させられそうです。

ありがとうございます。

あわせて知りたい

この質問につけられたタグ

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる