flex-direction：行在媒體查詢中不起作用

Question

當屏幕尺寸達到一定數量的像素時，我試圖讓我的頁腳列變成我的媒體查詢中的行。 我正在跟隨教程。 不過，它似乎不起作用。 我檢查了拼寫錯誤並在谷歌上下搜索了答案，但似乎沒有任何效果。 我錯過了什么嗎？

 footer{ background: var(--primary-50); padding-top: 5rem; padding-bottom: 2rem; } .footer-wrapper{ display: flex; flex-direction: column; gap: 3rem; } .footer-logo{ width: 150px; margin-bottom: 2rem; } .footer-desc{ font-size: 1.4rem; color: #360215; margin-bottom: 2rem; } .footer-social-title{ font-size: 1.8rem; color: #360215; margin-bottom: 1rem; } .footer-socials li{ display: inline-block; margin-right: 0.5rem; } .footer-socials a{ padding: 0.5rem 0.8rem; background-color:#f7e4eb ; border: 1px solid var(--primary-300); border-radius: 8px; } .footer-socials svg{ width: 20px; color: var(--black); } .footer-text-title{ font-size: 1.8rem; margin-bottom: 1rem; color:#360215; font-weight: 600; } .footer-text a{ font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--black); font-family: 'Assistant'; font-weight: 500; line-height: 1.4rem; } @media only screen and (min-width: 768px){ footer{ padding-top: 8rem; padding-bottom: 4rem; } .footer-wrapper { flex-direction: row; } .footer-col1{ flex: 4; } .footer-col2{ flex: 2; } .footer-desc{ max-width: 300px; font-size: 1.8rem; margin-bottom: 2.5rem; } .footer-social-title{ font-size: 2rem; margin-bottom: 1.5rem; } .footer-text-title{ font-size: 2rem; margin-bottom: 2rem; } .footer-text a{ font-size: 1.8rem; margin-bottom: 1rem; } }

 <footer> <div class="container"> <div class="footer-wrapper"> <div class="footer-col1"> <div class="footer-logo"> <img src="./shaif-s-cuisine-starter_files/images/plzwork.svg" alt="Soul Kitchen"> </div> <p class="footer-desc"> A passion project full of delicious recipes that remind me of my southern roots. </p> <div class="footer-socials"> <h4 class="footer-social-title">Follow Me!</h4> <ol> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /> </svg> </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5" /> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /> </svg> </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /> </svg> </a> </li> </ol> </div> <div class="footer-col1"> <h3 class="footer-text-title"> Links </h3> <ol class="footer-text"> <li> <a href="./home.html">Home</a> </li> <li> <a href="./recipes.html">Recipes</a> </li> <li> <a href="./cookterms.html">Cooking Terms</a> </li> <li> <a href="./contact.html">Contact</a> </li> <li> <a href="#">Privacy Policy</a> </li> </ol> </div> <div class="footer-col2"> <h3 class="footer-text-title"> Recipes </h3> <ol class="footer-text"> <li> <a href="#">Breakfast</a> </li> <li> <a href="#">Lunch</a> </li> <li> <a href="#">Dinner</a> </li> <li> <a href="#">Snacks</a> </li> <li> <a href="#">Desserts</a> </li> <li> <a href="#">Drinks</a> </li> </ol> </div> </div> </div> </div> </footer>

Answer 1

您的示例 CSS 信息不足以為您提供直接修復，我相信它會起作用。 至少，我需要知道實際發生了什么，並且還包括標記。 但是，我可以給你這個 JSFiddle 示例，我承認我不得不經常玩弄它並對 HTML 標記做出假設： https ://jsfiddle.net/a9Lxryc6/1/

我最好的猜測是您將嵌套的行/列項放在另一個對象中，例如 flex 頁腳包裝器圍繞頁腳而不是相反。

我的 JSFiddle 示例中的標記（以防它消失）：

<footer>
  <div class="footer-wrapper">
    <div class="footer-logo">
      meh
    </div>
    <div class="footer-col1">
      blah
    </div>
    <div class="footer-col2">
      blah2
    </div>
    <div class="footer-desc">
      blahdesc
    </div>
  </div>
</footer>

CSS 保持不變。

Answer 2

您的 HTML 有問題。 您沒有正確關閉 div。 請檢查下面的片段。

 footer{ background: var(--primary-50); padding-top: 5rem; padding-bottom: 2rem; } .footer-wrapper{ display: flex; flex-direction: column; gap: 3rem; } .footer-logo{ width: 150px; margin-bottom: 2rem; } .footer-desc{ font-size: 1.4rem; color: #360215; margin-bottom: 2rem; } .footer-social-title{ font-size: 1.8rem; color: #360215; margin-bottom: 1rem; } .footer-socials li{ display: inline-block; margin-right: 0.5rem; } .footer-socials a{ padding: 0.5rem 0.8rem; background-color:#f7e4eb ; border: 1px solid var(--primary-300); border-radius: 8px; } .footer-socials svg{ width: 20px; color: var(--black); } .footer-text-title{ font-size: 1.8rem; margin-bottom: 1rem; color:#360215; font-weight: 600; } .footer-text a{ font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--black); font-family: 'Assistant'; font-weight: 500; line-height: 1.4rem; } @media only screen and (min-width: 768px){ footer{ padding-top: 8rem; padding-bottom: 4rem; } .footer-wrapper { flex-direction: row; } .footer-col1{ flex: 4; } .footer-col2{ flex: 2; } .footer-desc{ max-width: 300px; font-size: 1.8rem; margin-bottom: 2.5rem; } .footer-social-title{ font-size: 2rem; margin-bottom: 1.5rem; } .footer-text-title{ font-size: 2rem; margin-bottom: 2rem; } .footer-text a{ font-size: 1.8rem; margin-bottom: 1rem; } }

 <footer> <div class="container"> <div class="footer-wrapper"> <div class="footer-col1"> <div class="footer-logo"> <img src="./shaif-s-cuisine-starter_files/images/plzwork.svg" alt="Soul Kitchen"> </div> <p class="footer-desc"> A passion project full of delicious recipes that remind me of my southern roots. </p> <div class="footer-socials"> <h4 class="footer-social-title">Follow Me!</h4> <ol> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /> </svg> </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5" /> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /> </svg> </a> </li> <li> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" /> </svg> </a> </li> </ol> </div> </div> <div class="footer-col1"> <h3 class="footer-text-title"> Links </h3> <ol class="footer-text"> <li> <a href="./home.html">Home</a> </li> <li> <a href="./recipes.html">Recipes</a> </li> <li> <a href="./cookterms.html">Cooking Terms</a> </li> <li> <a href="./contact.html">Contact</a> </li> <li> <a href="#">Privacy Policy</a> </li> </ol> </div> <div class="footer-col2"> <h3 class="footer-text-title"> Recipes </h3> <ol class="footer-text"> <li> <a href="#">Breakfast</a> </li> <li> <a href="#">Lunch</a> </li> <li> <a href="#">Dinner</a> </li> <li> <a href="#">Snacks</a> </li> <li> <a href="#">Desserts</a> </li> <li> <a href="#">Drinks</a> </li> </ol> </div> </div> </div> </footer>