ログイン
問題15

【flex-wrap】要素を折り返して表示しよう

CSSで要素を折り返して表示するには、flex-wrapプロパティを使用します。 flex-wrapは、横並びの状態で子要素が収まりきらない時に自動で折り返すように指定できるCSSプロパティです。

アイコン画像

本のアイコン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¥
            

コメントのアイコン解説

要素を折り返して表示するには、flex-wrapプロパティの値に'wrap'を指定します。
デフォルトではnowrap(折り返さない)が設定されています。
flex-wrapで指定した子要素
Excelなどを触った事がある方だと、イメージが付きやすいかと思います。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!