CSS
LINEでログイン
Googleでログイン
Twitterでログイン
flex-wrapとは
flex-wrapとは、flexアイテムを単一行に並べるか、折り返して表示してもよいのかを設定するためのCSSプロパティです。
折り返しの設定では、行を積み重ねる方向なども設定することができます。
初期値は折り返しをしない「nowrap」が設定されています。
折り返しを設定する場合は値に「wrap」を指定しましょう。
逆方向に並べたい場合は「wrap-reverse」を使ってみましょう。
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題15：【flex-wrap】要素を折り返して表示しよう
横並びになっている要素を折り返して表示させてみましょう。
あらかじめエディタに書くコード
<div class="boxs">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
¥HTML¥
.boxs {
width: 312px;
background: white;
border: 1px solid black;
padding: 20px;
display: flex;
justify-content: center;
}
.box {
width: 100px;
height: 100px;
background: black;
margin: 1px;
}
¥CSS¥
期待する画面
解答ソースコード
.boxs {
width: 312px;
background: white;
border: 1px solid black;
padding: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
¥CSS¥
完了にする！
活動記録をTweetする
デフォルトではnowrap(折り返さない)が設定されています。
flex-wrapで指定した子要素
Excelなどを触った事がある方だと、イメージが付きやすいかと思います。