堆栈内存溢出
  简体   繁体   English

flex-direction：行在媒体查询中不起作用

[英]flex-direction: row isn't working in media query

 原文  2022-05-13 11:48:16  6   2    html/ css

问题描述

When the screen size hits a certain number of pixels, I'm trying to get my footer columns to turn into rows inside my media query.当屏幕尺寸达到一定数量的像素时，我试图让我的页脚列变成我的媒体查询中的行。 I'm following along with a tutorial.我正在跟随教程。 It doesn't seem to be working, though.不过，它似乎不起作用。 I've checked for typos and searched google high and low for answers, but nothing seems to be working.我检查了拼写错误并在谷歌上下搜索了答案，但似乎没有任何效果。 Am I missing something?我错过了什么吗？ 

 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>

2 个解决方案

解决方案1
 0  2022-05-13 12:09:36

Your example CSS isn't enough information to give you a direct fix that I'm confident will work.您的示例 CSS 信息不足以为您提供直接修复，我相信它会起作用。 At the least, I need to know what's actually happening and have the mark-up also included.至少，我需要知道实际发生了什么，并且还包括标记。 However, I can give you this example JSFiddle where I admittedly had to toy with it a lot and make assumptions about the HTML mark-up: https://jsfiddle.net/a9Lxryc6/1/但是，我可以给你这个 JSFiddle 示例，我承认我不得不经常玩弄它并对 HTML 标记做出假设： https ://jsfiddle.net/a9Lxryc6/1/

My best guess is you had your nested row/column items in another object, like the flex footer wrapper was around footer instead of the other way around.我最好的猜测是您将嵌套的行/列项放在另一个对象中，例如 flex 页脚包装器围绕页脚而不是相反。

Mark-up from my JSFiddle example (in case it disappears):我的 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 remains unchanged. CSS 保持不变。

解决方案2
 0  2022-05-13 12:18:46

There is something wrong with your HTML.您的 HTML 有问题。 You had not correctly closed the div's.您没有正确关闭 div。 Please check the snippet below.请检查下面的片段。 

 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么弹性方向不从行到列 - Why isn't the flex-direction going from row to column 为什么flex-direction列在这里不起作用？ - Why isn't flex-direction column working here? 弯曲方向：柱； 不在@media 风格规则中工作 - Flex-Direction: Column; not working in a @media style rule 弹性方向：行不工作； 它仍然显示为一列 - flex-direction: row is not working; it's still displaying as a column 容器不适合屏幕和伸缩方向：行无法正常工作 - Container not fitting to screen and flex-direction: row not working properly flex-direction行不表现为行 - flex-direction row not behaving as row 媒体查询将 flex-direction 设置为列后，div 消失，可能是因为 flex 属性 - Div disappears after media query sets flex-direction to column, probably because of flex property 是否可以覆盖 flex-direction: row？ - Is there away to override flex-direction: row? flexbox 内的弹性方向“行”和弹性方向“列” - flex direction "row" inside a flexbox with flex-direction "column" flex-direction 在 chrome 中没有按预期工作 - flex-direction is not working as expected in chrome
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM