CSSのflexとブレイクポイントで画像をレスポンシブ
flexを使って画像を横並びにします。
flexboxは、HTML上でflexコンテナ（親要素）の中に、flexアイテム（子要素）を入れ子にします。
CSSでは親要素にdisplay: flexを指定します。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <link rel="stylesheet" href=style.css type="text/css"> <title>ラリルレログ</title> </head> <body> <div class="container"> <div class="item"><img src="001.jpg"></div> <div class="item"><img src="002.jpg"></div> <div class="item"><img src="003.jpg"></div> <div class="item"><img src="004.jpg"></div> <div class="item"><img src="005.jpg"></div> <div class="item"><img src="006.jpg"></div> </div> </body> </html> |
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 |
body { margin: 0; background: #32313b; } .container { margin: .5vw; font-size: 0px; display: -ms-flexbox; -ms-flexbox-wrap: wrap; -ms-flexbox-direction: column; -webkit-flex-flow: row wrap; flex-flow: row wrap; display: -webkit-box; display: flex; } .container div { -webkit-box-flex: auto; -ms-flex: auto; flex: auto; width: 200px; margin: .5vw; border: 1px solid #eb5d00; } .container div img { width: 100%; height: auto; } @media screen and (max-width: 400px) { .container div { margin: 0; } .container { padding: 0; } } |
Memo
flex-flowプロパティを使用して、画像を横並びにしてみました。
flex-flowは、flex-direction（子要素の並ぶ向き）とflex-wrap（子要素の折り返し）をまとめて指定できるプロパティです。
|
1 |
flex-flow: row wrap |
- 子要素を左から右に配置(row)
- 子要素を折り返し、複数行に上から下へ並べる(wrap)
< azuk >