为啥 flex 属性不能正常工作？

Posted 2023-03-05

技术标签:

【中文标题】为啥 flex 属性不能正常工作？【英文标题】：why the flex property is not working properly?为什么 flex 属性不能正常工作？ 【发布时间】：2021-12-06 02:04:39 【问题描述】：

这是我的代码：

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
* 
  box-sizing: border-box;
  margin: 0;
  padding: 0;


body 
  background-color: hsl(233, 47%, 7%);
  font-size: 15px;


h1 
  color: hsl(0, 0%, 100%);
  font-family: "Inter", "sans-serif";
  line-height: 1.5;
  margin-top: 2rem;


p 
  color: hsla(0, 0%, 100%, 0.75);
  font-family: "Lexend Deca", "sans-serif";


#card 
  max-width: 400px;
  background: hsl(244, 38%, 16%);
  margin: 6rem auto;
  border-radius: 15px;


#image 
  background: url("https://xaviour1504.github.io/stats-preview-card/images/image-header-mobile.jpg");
  width: 100%;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;


.overlay 
  width: 100%;
  height: 100%;
  background: hsl(277, 64%, 61%);
  opacity: 0.5;
  position: absolute;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;


#content 
  text-align: center;
  margin: 5rem 2rem;


#para 
  line-height: 1.5;
  margin: 2rem;



/* media queries */

@media (min-width: 600px) 
  #card 
    display: flex;
    max-width: 1200px;
    flex-direction: row-reverse;
    height: 400px;
    margin: 10rem auto;
  
  #content 
    margin: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
  
  #image 
    height: 400px;
    max-width: 600px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 0px;
  
  .overlay 
    border-bottom-right-radius: 15px;
    border-top-left-radius: 0;
  
  .stats 
    display: flex;
    gap: 5rem;
    margin: 0 auto;
  
  p 
    margin-bottom: 30px;
  
  #heading 
    margin-left: 27px;
  
  #para 
    margin-top: 20px;

<body>
  <div id="card">
    <div id="image">
      <div class="overlay"></div>
    </div>
    <div id="content">
      <h1 id="heading">
        Get <span style="color: hsl(277, 64%, 61%)">insights</span> that help your business grow.
      </h1>
      <p id="para">
        Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.
      </p>
      <div class="stats">
        <div class="box1">
          <h1>10k+</h1>
          <p>COMPANIES</p>
        </div>
        <div class="box2">
          <h1>314</h1>
          <p>TEMPELATES</p>
        </div>
        <div class="box3">
          <h1>12M+</h1>
          <p>QUERIES</p>
        </div>
      </div>
    </div>
  </div>
</body>

当我让我的屏幕变小时，内容 div 占据全宽并且图像 div 越来越小，为什么当我缩小屏幕时它没有分成相等的空间。

【问题讨论】：

请阅读How to Ask和minimal reproducible example。重现您的问题所需的最少代码直接属于您的问题，采用文本形式且格式正确，而不仅仅是转储到外部平台上。嗨！您可以为两个孩子提供 flex based 50 以使空间相等，或者您也可以将内容均匀地分配给空间。干杯 @xaviour1504 如果屏幕变小，预期的行为是什么？分成两排？保持在 1 行？请澄清。 【参考方案1】：

如果您在正文中添加左右填充，这将阻止卡片接触边缘。例如

body 
 padding: 0 20em;

不一定是 20em，这只是一个例子。

要获得卡片内 div 的间距，你应该看看这个 flexbox 指南：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

【参考方案2】：

我将下面的 CSS 添加到您的页面中，它似乎工作正常：

/********************************************************/
/* ADDED */
/********************************************************/
#image, #content
  flex: 1 0 100%;
  max-width: 100%;

#content
  margin: 0;

.stats
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;

@media (min-width: 600px) 
  #image, #content
    flex: 1 0 100%;
    max-width: 50%;

我将 content 和 image 设置为 flex 50%，这将始终保持相同的大小。

然后我将您的 stats 设置为网格，因为它超出了父级。

演示

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap");
* 
    box-sizing: border-box;
    margin: 0;
    padding: 0;

body 
    background-color: hsl(233, 47%, 7%);
    font-size: 15px;

h1 
    color: hsl(0, 0%, 100%);
    font-family: "Inter", "sans-serif";
    line-height: 1.5;
    margin-top: 2rem;

p 
    color: hsla(0, 0%, 100%, 0.75);
    font-family: "Lexend Deca", "sans-serif";

#card 
    max-width: 400px;

    background: hsl(244, 38%, 16%);
    margin: 6rem auto;
    border-radius: 15px;

#image 
    /*background: url("./images/image-header-mobile.jpg");*/
  background:url("https://xaviour1504.github.io/stats-preview-card/images/image-header-mobile.jpg");
    width: 100%;
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

.overlay 
    width: 100%;
    height: 100%;
    background: hsl(277, 64%, 61%);
    opacity: 0.5;
    position: absolute;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

#content 
    text-align: center;
    margin: 5rem 2rem;

#para 
    line-height: 1.5;
    margin: 2rem;

/* media queries */
@media (min-width: 600px) 
    #card 
        display: flex;
        max-width: 1200px;
        flex-direction: row-reverse;
        height: 400px;
        margin: 10rem auto;
    
    #content 
        margin: 40px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    
    #image 
        height: 400px;
        max-width: 600px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 0px;
    
    .overlay 
        border-bottom-right-radius: 15px;
        border-top-left-radius: 0;
    
    .stats 
        display: flex;
        gap: 5rem;
        margin: 0 auto;
    
    p 
        margin-bottom: 30px;
    
    #heading 
        margin-left: 27px;
    
    #para 
        margin-top: 20px;
    

/********************************************************/
/* ADDED */
/********************************************************/
#image, #content
  flex: 1 0 100%;
  max-width: 100%;

#content
  margin: 0;

.stats
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;

@media (min-width: 600px) 
  #image, #content
    flex: 1 0 100%;
    max-width: 50%;

<body>
  <div id="card">
    <div id="image"><div class="overlay"></div></div>

    <div id="content">
      <h1 id="heading">
        Get <span style="color: hsl(277, 64%, 61%)">insights</span> that help
        your business grow.
      </h1>
      <p id="para">
        Discover the benefits of data analytics and make better decisions
        regarding revenue, customer experience, and overall efficiency.
      </p>
      <div class="stats">
        <div class="box1">
          <h1>10k+</h1>
          <p>COMPANIES</p>
        </div>
        <div class="box2">
          <h1>314</h1>
          <p>TEMPELATES</p>
        </div>
        <div class="box3">
          <h1>12M+</h1>
          <p>QUERIES</p>
        </div>
      </div>
    </div>
    -->
  </div>
</body>

【讨论】：

以上是关于为啥 flex 属性不能正常工作？的主要内容，如果未能解决你的问题，请参考以下文章

我正在使用 Moovweb 弹性盒子，但尺寸不能正常工作……发生了啥？

为啥种子价值不能正常工作？