要素を横に並べて表示する「flex-wrap」

flexbox機能の一つのflex-wrapプロパティについて
CSSで簡単にレイアウトが組めるボックスとしてflexboxという機能があります。
その機能の一部に、「flex-wrap」プロパティがあります。
通常は他の機能と組み合わせて利用されることが多く、例えばflex-direction、justyy-contentなどのプロパティがありますが、まずは使用頻度の多いflex-wrapプロパティについて、見てみましょう。
1219604.png


事例1 nowrap は折り返さない

flex-wrapプロパティの値に nowrap を使うと、横に並ぶが端で折り返さない

A
B
C
D
E


事例1のHTMLのソース
<div class="contentArea">
    <div id="id1" class="flexbox1"><div class="ca">A</div><div class="cb">B</div><div class="cc">C</div><div class="cd">D</div><div class="ce">E</div></div>
</div>


事例1~3に共通のCSSのソース(この部分は事例2~3では省略します)
.contentArea{
  display   : inline-block;
  width     : 210px;
  text-align: center;
  border    : 1px solid #999;
  margin    : 3px;
  vertical-align:top;
}

.flexbox1{
  display : flex;
  background: #d4ddf8;
  width     : 130px;
  height    : 100px;
  margin    : 10px;
  padding   : 3px;
}

.ca{background: #2d59dc;}
.cb{background: #436ae0;}
.cc{background: #597be3;}
.cd{background: #6f8de7;}
.ce{background: #849eeb;}

事例1のCSSのソース
#id1 {
  flex-wrap        : nowrap;
}


事例2 wrap は折り返す

flex-wrapプロパティの値にwrap を使うと、横に並び端で折り返す

A
B
C
D
E


事例2のHTMLのソース
<div class="contentArea">
    <div id="id2" class="flexbox1"><div class="ca">A</div><div class="cb">B</div><div class="cc">C</div><div class="cd">D</div><div class="ce">E</div></div>
</div>

事例2のCSSのソース
#id2 {
  flex-wrap        : wrap;
}


事例3 wrap-reverse は下から上に折り返す

flex-wrapプロパティの値にwrap-reverse を使うと、横に並び端で折り返すが、事例2とは逆に下の方から上に折り返している

A
B
C
D
E


事例3のHTMLのソース
<div class="contentArea">
    <div id="id3" class="flexbox1"><div class="ca">A</div><div class="cb">B</div><div class="cc">C</div><div class="cd">D</div><div class="ce">E</div></div>
</div>

事例3のCSSのソース
#id3 {
  flex-wrap        : wrap-reverse;
}


事例4 ところでですが・・・
例えば、事例2のケースで、黒線の外枠を試しに消してみましょう。
<div class="contentArea">~</div>を削除します。

事例4-1
A
B
C
D
E

見栄えは多少は違いますが、中身には影響がないですね。
これは、事例1も事例3も同様です。

事例4-1のHTMLのソース(事例2の外枠を削除したもの)
<div id="id2" class="flexbox1"><div class="ca">A</div><div class="cb">B</div><div class="cc">C</div><div class="cd">D</div><div class="ce">E</div></div>


では、事例2と事例3を横に並べて表示してみましょう。
そうすると2つを囲む枠が欲しくなりますので、事例1~3で使用した枠を追加してみましょう。

事例4-2
A
B
C
D
E
A
B
C
D
E


横ではなく縦に表示されました。これは横幅が210pxで指定してありますが足りないようです。
高さの指定はないので自動的に高さが変わったようです。
なので、横幅の指定も削除してみましょう。

このために、新たにプロパティを作ります。
そして、display : inline-block; を display:flex; に書き変えます。
※理由が分からないのですが、display:flex; にしないといくら幅を広げても縦に表示されました。

新たに作成したCSS・プロパティ名はcontentAreaFreeにしました
事例4-3以降で使用するCSSのソース
.contentAreaFree {
  display   : flex;
  text-align: center;
  border    : 1px solid #999;
  margin    : 3px;
  vertical-align:top;
}
事例4-3
A
B
C
D
E
A
B
C
D
E
ちゃんと表示され、外枠は自動的に表示できるサイズいっぱいに調整されています。


ではこれに事例1を加えてみます。
はみ出している事例1が右に来るように事例2、事例3、事例1の順で表示してみましょう。
事例4-4
A
B
C
D
E
A
B
C
D
E
A
B
C
D
E

このときのHTMLのソースは、少し長くなりますが・・・
事例4-4のHTMLのソース
<div class="contentAreaFree">
 <div id="id2" class="flexbox1"><div class="ca">A</div><div class="cb">B</div><div class="cc">C</div><div class="cd">D</div><div class="ce">E</div></div>
 <div id="id3" class="flexbox1"><div class="ca">A</div><div class="cb">B</div><div class="cc">C</div><div class="cd">D</div><div class="ce">E</div></div>
 <div id="id1" class="flexbox1"><div class="ca">A</div><div class="cb">B</div><div class="cc">C</div><div class="cd">D</div><div class="ce">E</div></div>
</div>


ちなみに、事例1、事例2、事例3の順で表示すると・・・
事例4-5
A
B
C
D
E
A
B
C
D
E
A
B
C
D
E
事例1の「E」の部分が事例2と重なって消えてしまいましたね。


はみ出している事例1の内容がもっと長かったらどうなるか、Pまで加えてみましょう。
事例4-6
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
A
B
C
D
E
A
B
C
D
E
このようにちゃんと裏側で表示されていて、重なっていない部分は見えていましたね。
なお、色が薄く見えるのは背景色をF~PにもEと同じ淡い色の背景色を適用したためです。


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 21

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた
ナイス ナイス ナイス ナイス

この記事へのコメント