Flexboxを使ったレスポンシブレイアウト
レスポンシブレイアウト test 8016 使用不可
結果 : 並ばない
レスポンシブWebデザインチェックツール
http://lqd.jp/lab/rwd.html?url=http%3A%2F%2Fsystemboy.xsrv.jp%2F9014
CSS GridとFlexboxを使ってメディアクエリなしでレスポンシブにレイアウトする方法<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>レスポンシブなFlexbox</title> <link rel="stylesheet" href="css/style.css"> <style> .flexbox { display: flex; flex-wrap: wrap; border: 1px solid #ddd; padding: 0.4em; margin: 0 0 2em; } .flexbox > div { background: #ddd; padding: 1em; flex: 1 0 300px; margin: 0.4em; } </style> </head> <body> <div class="content"> <div class="row"> <div class="grid-12"> <h1>レスポンシブなFlexbox</h1> <p>Flexboxを使うとメディアクエリを書かなくても、以下のようなレスポンシブなレイアウトが実現できます。</p> <div class="flexbox"> <div class="item1"> <h3>アイテム1</h3> <img src="https://picsum.photos/g/600/400?image=1060" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p> </div> <div class="item2"> <h3>アイテム2</h3> <img src="https://picsum.photos/g/600/400?image=625" /> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> <div class="item3"> <h3>アイテム3</h3> <img src="https://picsum.photos/g/600/400?image=882" /> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> </div> <div class="item4"> <h3>アイテム4</h3> <img src="https://picsum.photos/g/600/400?image=755" /> <p>Nulla consequat massa quis enim.</p> </div> <div class="item5"> <h3>アイテム5</h3> <img src="https://picsum.photos/g/1200/800?image=691" /> <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </div> </div> </div> </div> </div> </div>
