質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

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

yura-asuha
yura-asuha

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

1回答

0グッド

0クリップ

169閲覧

投稿2023/02/06 15:02

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

1

ベストアンサー

前の3つの要素を囲むボックスを追加して、
改行しないときは、 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}

投稿2023/02/07 05:25

hatena19

総合スコア32213

yura-asuha😄を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

yura-asuha

2023/02/07 11:53

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。