cssの参考書を2週目しているのですが、内容が少し古いために2週目はなるべく新しい方法を使ってコーディングしています。画像はflexboxを使用していますが右側の余白を埋めるやり方がわかりません。ご教授お願いします。
参考書内ではMasonryを導入してレンガ状に並べています。
<div class="flex"> <section class="item item-l item-maindish"> <a href=""> <img class="image" src="images/image_L_1.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> <section class="item item-m item-maindish"> <a href=""> <img class="image" src="images/image_M_1.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> <section class="item item-m item-maindish"> <a href=""> <img class="image" src="images/image_M_2.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> <section class="item item-maindish"> <a href=""> <img class="image" src="images/image_S_1.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> <section class="item item-apptizer"> <a href=""> <img class="image" src="images/image_S_2.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor incididunt ipo dssd c </p> </a> </section> <section class="item item-column"> <a href=""> <img class="image" src="images/image_S_3.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor incididunt ipo</p> </a> </section> <section class="item item-breaktime"> <a href=""> <img class="image" src="images/image_S_4.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor</p> </a> </section> <section class="item item-maindish"> <a href=""> <img class="image" src="images/image_S_5.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> <section class="item item-maindish"> <a href=""> <img class="image" src="images/image_S_6.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> <section class="item item-maindish"> <a href=""> <img class="image" src="images/image_S_7.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> <section class="item item-maindish"> <a href=""> <img class="image" src="images/image_S_8.jpg" alt=""> <div class="category">main dish</div> <p class="description">lorem ipsum dolor sit amey,conscrtetir adipisocinf elit, seddoeois,odtempor i</p> </a> </section> </div> </body> コード
html{ font-size: 62.5%; } body { padding: 30px; background-color: #f6f7fb; color: #333; font-size: 1.2rem; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } *,*::before,*::after{ box-sizing: border-box; } a:link,a:visited a:hover,a:active{ color:#7c5119; text-decoration: none; } .flex{ display: flex; align-items: baseline; flex-wrap: wrap; } .item{ margin: 2px; width: 180px; margin-bottom: 4px; padding: 8px; border-bottom: 3px solid; border-radius: 5px; background-color: #fff; } .item .image{ display: block; width: 100%; height: 109px; } .item .category{ margin: 15px 9px 10px; color:#aaa; letter-spacing: 1px; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } .item .category::before{ content: ''; display: inline-block; width:19px; height: 19px; margin-right: 5px; border:2px solid; border-radius: 50%; vertical-align: -5px; } .item-maindish, .item-maindish .category::before{ border-color: #FFC0CB } .item-apptizer, .item-apptizer .category::before{ border-color: yellow; } .item>a { display: block; margin:-8px -8px -11px; padding: 8px 8px 11px; border-radius: inherit; color: #777; transition: all 0.3s; } .item a:hover{ box-shadow: 0 0 6px -1px rgba(0,0,0,0.3); opacity: 0.8; } .item-m{ width:364px; } .item-l{ width:732px; } .item-m .image{ height: 146px; } .item-l .image{ height: 403px; } コード
回答1件
あなたの回答
tips
プレビュー