バートリーのさいとうです。
今回は
【css】数が決まっていない要素を横に並べる際に、指定幅以上になったらブロック要素を折り返す方法
というテーマで、普段の業務から得られた学びを共有したいと思います。
「ブロック要素を横並びにさせたいけど、データの要素数が多すぎるときは、折り返したい！」
「しかもデータの数は不特定！」
以上の条件が揃っているときに、読んでいただきたい記事となっております。
この記事を読めば
- データ依存するcssが書けるようになる
- flexboxを利用したブロック要素の折り返し方法がわかる
- 要素の高さにも依存することがわかる
と思いますので、是非最後までお付き合いください。
結論
このプロパティを、使います
flex-wrap: wrap;実際のコードはこちらです。
See the Pen ブロック要素を折り返す by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
詳細に解説していきます。
詳細説明
前提として、横並べしたい要素を子要素としたときに、その親となる要素が必要になります。
先ほどの例だと、contents（親）とcontent_list（子）の関係ですね。
それを踏まえた上で、先ほどのflex-wrapも含めて詳細を見ていきます。
コードの詳細
cssのコードを再掲します。
//親要素
.contents{
display: flex;
flex-wrap: wrap;
background: #dddddd;
height: 200px;
padding: 10px 20px
}
//子要素
.content_list{
width: calc((100% - 40px) / 4) ;
height: 50%;
background: green;
color: white;
text-align: center;
margin: 0 5px
}今回のポイントとしては、
- 親要素にdisplay: flexとflex-wrap: wrap
- 子要素のwidthを4等分になるように計算して指定
です。
ちなみに子要素のwidth計算は、
(各要素の100% – 子要素毎のマージンの合計) / 4
で、計算をしています。
flex-wrapとは？
では、flex-wrapとはどんなプロパティなのでしょうか？
https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap から引用すると
フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。
とあるように、flexをかけた要素群の並びを調整できるプロパティであることがわかります。
初期値は、nowrapとされていることから、折り返さないことがわかります。
ここに、wrapを追加することで、横並びになっている子要素が親要素の幅以上になろうとするときに折り返させることが可能になります。
（補足）リバースや並び順の変更も可能
wrap-reverseとすると、要素の並び順を変更することが可能です。
参考例を作成しましので、よろしければご覧ください。
See the Pen ブロック要素を折り返す reverse by バートリーのさいとう@エンジニア (@bartleysaito) on CodePen.
また、flex-directionプロパティで横方向か縦方向かを決めることもできます。
親要素にflex-direction: column;をかけると実際の様子が見れますので、こちらも参考にされてください。
floatプロパティでも再現可能？
この他に、floatプロパティでも同様のことが再現可能なようです。
ただ、条件が色々あるようなので、詳細はこちらの記事をご覧ください。（今回の記事の参考文献でもあります）
IEへの対応以外の面で見れば、無難にdisplay: flexとflex-wrap（+ flex-direction）を利用した方がよさそうですね。
まとめ
今回は、【css】数が決まっていない要素を横に並べる際に、指定幅以上になったらブロック要素を折り返す方法、について解説しました。
意外と「文字列を折り返す」はすぐ見つかるのですが、ブロック要素を折り返すは数がそんなに多くなかったので書いてみました。
このブログは、月に15本を目標に、実務から学んだプログラミングのあれこれを発信しています。
誰かのためになれば、嬉しいです。
最後まで読んでいただき、ありがとうございました。
それでは。
参考記事
