@media (min-width:768px)になったときに、flexの３つ目の子要素を改行させる方法について

Question

flex内の任意の位置で改行する方法を教えていただければ幸いです。
お手数ですが、よろしくお願いいたします。

@media (min-width:768px)になったときに、flexの３つ目の子要素を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%;
  }
}

Answer 1

前の３つの要素を囲むボックスを追加して、
改行しないときは、 display: contents;でそのボックスがないことにするというのはどうでしょう

display: contents

<div class="container">
  <img src="https://placehold.jp/300x100.png" alt="kirameki" class="logo2">
  <div class="footer-container">
    <div class="wrap">
    <a href="#">レシピ一覧</a>
    <a href="#">特集</a>
    <a href="#">ランキング</a>
    </div>
    <a href="#">運営会社</a>
    <a href="#">お問い合わせ</a>
    <a href="#">利用規約</a>
    <a href="#">プライバシーポリシー</a>
  </div>
</div>

.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;
}

.wrap {
  display: contents;
}

@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;
  }
  .wrap {
    display: flex;
    column-gap: 40px;
    width: 100%;
  }
}

Comments

[yura-asuha]

ご回答ありがとうございました。
display:contents;
このような設定があると、初めて知りました。
新しいことを学べて、考えの幅が広がりました。
本当にありがとうございました。