Question

问题是，当我将填充添加到使用flexbox的div中时，当子元素的宽度为100％时，填充会超出父元素。这是为什么？谢谢！

我注意到，此问题已通过添加box-sizing来解决：border-box;或将flex：0 0 100％更改为flex：0 1 100％？哪种方法更好或更有效？

.row {
  background: orange;
  justify-content: space-between;
  padding: 30px;
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.row>div {
  flex: 0 0 31%;
  padding: 30px;
}

.colLeft {
  background: red;
}

.colRight {
  background: blue;
}

@media only screen and (max-width: 630px) {
  .row>div {
    flex: 0 0 100%;
  }
}

<div class="row">
  <div class="colLeft">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="colRight">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 1

有两种方法可以做到这一点。其中之一，我认为在容器中添加“ flex-direction：column”非常容易。这样可以解决代码中的填充问题。我希望这会有所帮助：）

.row {
    background: orange;
    justify-content: space-between;
    flex-direction: column;
    padding: 30px;
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.row > div {
    flex: 0 0 31%;
    padding: 30px;
}

.colLeft {
    background: red;
}

.colRight {
    background: blue;
}

@media only screen and (max-width: 830px) {
    .row > div {
        flex: 0 0 100%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   
   <div class="row">
      <div class="colLeft">
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="colRight">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
       
   </div>
    
</body>
</html>

Answer 2

您要告诉弹性项目宽度为100％（通过flex-basis）：

@media only screen and (max-width: 830px) {
    .row > div {
        flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
    }
}

但是您还要为每个项目提供60px的水平填充：

.row > div {
    padding: 30px;
}

嗯，100% + 30px + 30px大于100％，所以自然会有溢出。

您可以通过设置盒子模型以将填充长度纳入宽度计算中来解决此问题。

将此添加到您的代码中：

.row > div {
  box-sizing: border-box;
}

Learn more about the CSS box-sizing property。

带填充的弹性项目溢出容器

2 个答案: