下記レイアウトをflexboxで作成しております。
六角形のオブジェクトをflexboxの上に配置するにはどのようにしたらよろしいでしょうか?
ご教示頂くと頂きますと幸いです。
index.html
1<div class="flexbox"> 2 <div class="item"> 3 <img src="http://placehold.it/240x150" alt="" /> 4 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> 5 </div> 6 <div class="item"> 7 <img src="http://placehold.it/240x150" alt="" /> 8 <p>Nulla pharetra porta sagittis. Mauris et suscipit diam...</p> 9 </div> 10 <div class="item"> 11 <img src="http://placehold.it/240x150" alt="" /> 12 <p>Integer ornare felis eu risus ultrices pharetra eu non velit...</p> 13 </div> 14</div>
style.css
1.item { 2 border-radius: 10px; 3 background: #edf; 4 padding: 15px; 5 margin: 5px; 6 text-align: center; 7} 8img { 9 max-width: 100%; 10 height: auto; 11} 12p { 13 text-align: left; 14} 15 16/* Responsive */ 17@media ( min-width : 600px ){ 18 .flexbox { 19 display: -webkit-flex; 20 display: flex; 21 -webkit-flex-wrap: wrap; 22 flex-wrap: wrap; 23 } 24 .item { 25 width: 25%; 26 } 27}
六角形のオブジェクトの描画方法の質問ですか?それともオブジェクトの配置方法の質問なのでしょうか?
オブジェクトの配置方法です。言葉足らずで申し訳ございません。