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

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

回答1件

ベストアンサー

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

display: contents

html
1<div class="container">
2  <img src="https://placehold.jp/300x100.png" alt="kirameki" class="logo2">
3  <div class="footer-container">
4    <div class="wrap">
5    <a href="#">レシピ一覧</a>
6    <a href="#">特集</a>
7    <a href="#">ランキング</a>
8    </div>
9    <a href="#">運営会社</a>
10    <a href="#">お問い合わせ</a>
11    <a href="#">利用規約</a>
12    <a href="#">プライバシーポリシー</a>
13  </div>
14</div>

css
1.container {
2  max-width: 1100px;
3  padding: 60px 20px;
4  margin-right: auto;
5  margin-left: auto;
6}
7
8.logo2 {
9  margin-bottom: 40px;
10}
11
12.footer-container {
13  display: flex;
14  max-width: 280px;
15  width: 100%;
16  flex-wrap: wrap;
17  column-gap: 40px;
18  row-gap: 24px;
19  margin-bottom: 40px;
20  line-height: 1;
21}
22
23.footer-container a {
24  font-size: 14px;
25}
26
27.wrap {
28  display: contents;
29}
30
31@media screen and (min-width: 768px) {
32  .container {
33    padding: 80px 163px;
34  }
35
36  .logo2 {
37    margin-bottom: 34px;
38  }
39
40  .footer-container {
41    display: flex;
42    max-width: 495px;
43    width: 100%;
44    flex-wrap: wrap;
45    column-gap: 40px;
46    row-gap: 24px;
47    margin-bottom: 40px;
48    line-height: 1;
49  }
50  .wrap {
51    display: flex;
52    column-gap: 40px;
53    width: 100%;
54  }
55}