posted on 2018.11.27
3列3行の横並び実装
3列3行の横並びの実装は以下になります。フレックスボックスとfloatプロパティーとの共存も少し考えながら実装してみました。display:flex;をはずしてもflaotのみで一応成立します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html> <html lang="ja"> <head> <title>フレックスボックスfloatプロパティーの共存 横並びレイアウト 3列3行</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> <!-- #parent-box { background:#f9c693; clear: both; overflow: hidden; padding: 1em; display: flex; flex-wrap: wrap; } .box{ background: #a2601d; min-height: 10em; width: 31%; margin-right: 3.5%; margin-bottom: 1em; float: left; } .box:nth-child(3n) { margin-right: 0; } --> </style> </head> <body> <div id="parent-box"> <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> </body> </html> |
flex-wrap: wrap;の追加
見出しの通りです。前回のコードに新しく追加したのはflex-wrap: wrap;の行だけになります。 flex-wrapプロパティは、フレックスアイテム、子要素を単一行に押し込むか、あるいは複数行に折り返してもよいかを指定するものです。折り返しを許可する場合は、行を積み重ねる方向の制御も可能です。
それではフレックスボックスで使用するflex-wrapプロパティの値と意味を確認してみましょう。
| flex-wrap: nowrap; | フレックスアイテムは折り返されず、1行で表示されます。規定値（デフォルト） |
|---|---|
| flex-wrap: wrap; | フレックスアイテムは折り返され、複数行で表示されます。通常は上から下に折り返され、2行目以降のアイテムは左から右に配置されます。 |
| flex-wrap: wrap-reverse; | フレックスアイテムは折り返され、複数行で表示されます。ただし、wrapとは逆に、下から上に折り返されます。 |
flex-wrap: wrap-reverse;に関してはここでは使用しないので特に説明は割愛させて頂きます。アイテムを複数行にまたっがって並べたい時にはflex-wrap: wrapを指定します。display: flex;を親要素に指定してあれば、flex-wrap: nowrap;が規定値なので、なにも書かない場合はflex-wrap: nowrap;に従います。3列3行のcssからf lex-wrap: wrapを外すと一行に9個のボックスが並ぶだけになります。
flexboxとベンダープレフィックス
主要ブラウザの現行でCSS Flexible Box Layout Moduleにほぼ対応していてベンダープレフィックスなしでも問題は見受けられません。flexboxが効かないケースではfloatで対応するように書いてあるので、大丈夫だとは思いますが、一応数バージョン前までに対応できるプレフィックスを3列3行のcssにプラスして最後に書いておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html lang="ja"> <head> <title>フレックスボックス横並びレイアウト 3列3行 プレフィックス</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> <!-- body{ } #parent-box { background:#f9c693; clear: both; overflow: hidden; padding: 1em; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .box{ background: #a2601d; min-height: 10em; width: 31%; margin-right: 3.5%; margin-bottom: 1em; float: left; word-break: break-all; } .box:nth-child(3n) { margin-right: 0; } --> </style> </head> <body> <div id="parent-box"> <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> </body> </html> |
これでフレックスボックス{display : flex;}で考えるcss横並び実装の基本【初心者向け】の記事を終わりにしたいと思います。皆様の実践に少しでもお役にたてていれば幸いです。それではまた。
