Q&A
flex内の任意の位置で改行する方法を教えていただければ幸いです。
お手数ですが、よろしくお願いいたします。
@media (min-width:768px)になったときに、flexの3つ目の子要素を1つ目の下記の画像のように改行させるためにはどうすればよいでしょうか?
ネットでは、<div>で空ブロックを作って、width:100%;にすればよいとあったので、試してみたら、この空ブロックに対して上下にrow-gap:24px;が適応されて、余白が多くなってしまいました。この余白を24pxにしたいです。
この画像のように配置したいです。
問題の画像(上下文字間が48pxになっている)
html
<div class="container"> <img src="../recipe/images/footer/footer_logo.svg" alt="kirameki" class="logo2"> <div class="footer-container"> <a href="#">レシピ一覧</a> <a href="#">特集</a> <a href="#">ランキング</a> <div class="kara"></div> <a href="#">運営会社</a> <a href="#">お問い合わせ</a> <a href="#">利用規約</a> <a href="#">プライバシーポリシー</a> </div> </div>
css
.container { max-width: 1100px; padding: 60px 20px; margin-right: auto; margin-left: auto; } .logo2{ margin-bottom: 40px; } .footer-container{ display: flex; max-width: 280px; width: 100%; flex-wrap: wrap; column-gap: 40px; row-gap: 24px; margin-bottom: 40px; line-height: 1; } .footer-container a{ font-size: 14px; } .kara{ display: none; } @media screen and (min-width:768px){ .container{ padding: 80px 163px; } .logo2{ margin-bottom: 34px; } .footer-container{ display: flex; max-width: 495px; width: 100%; flex-wrap: wrap; column-gap: 40px; row-gap: 24px; margin-bottom: 40px; line-height: 1; } .kara{ display: block; width: 100%; } }
回答1件
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/07 11:53