Question

我已经阅读了这个SO pos并实现了它的建议。

在我的代码下面。

基本上当我向我的弹性儿童添加填充物时，它会拉伸到应有的宽度，两个盒子（金色和灰色）应该是相同的宽度，但是大量的填充会导致金色盒子略大因而无视其50％的基础。

为什么会发生这种情况？如何解决？我希望两个盒子的宽度都相同，即使是填充物。

＆＃13;

.container {
  display: flex;
  height: 100px;
  width: 100%;
}

.one {
  background: gold;
  box-sizing: border-box;
  flex: 1 0 50%;
  padding: 1em 15em;
}

.two {
  background: grey;
  flex: 1 0 50%;
}

＆＃13;

<div class="container">
  <div class="one">
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
  </div>
  <div class="two">
    two
  </div>
</div>

＆＃13;

Answer 1

单位em与字体大小相关，因为您可以阅读here：

em：相对于元素的字体大小（2em表示大小的2倍）当前字体）

由于字体大小是固定的，因此填充的值将是绝对的而不是相对的。您可以改变容器的字体大小，您会发现差异。在您的情况下，第一个框占用更多空格，因为填充左侧和填充右侧的总和超过容器宽度的50％。

在下面的示例中，我将字体大小修改为 10px ，因此填充值将为： 10px 150px ，这意味着您总共 300px 填充将计入宽度。

假设您的屏幕显示 1600px ，然后50％= 800px，您的包装盒有300px甚至更多。在这种情况下它应该没问题，因为你的盒子可以适合50％。
假设您现在有一个 500px 的屏幕，您的信箱将被强制执行因为他至少拥有300px，所以需要超过 50％（250px） 填充。

在您的情况下，当您使用默认的字体大小值16px时，框会更大。

＆＃13;

.container {
  display: flex;
  height: 100px;
  width: 100%;
  font-size:10px;
}

.one {
  background: gold;
  box-sizing: border-box;
  flex: 1 0 50%;
  padding: 1em 15em;
}

.two {
  background: grey;
  flex: 1 0 50%;
}

＆＃13;

<div class="container">
  <div class="one">
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
  </div>
  <div class="two">
    two
  </div>
</div>

＆＃13;

因此，按照此说明，您的代码与此相同：

.one {
   background: gold;
   box-sizing: border-box;
   flex: 1 0 50%;
   padding: 16px 240px;
 }

我相信如果你这样写，你就会明白为什么会遇到这个问题。

为了避免这种情况，您可以使用相对于宽度的%，并且您不会失去50％/ 50％的比例：

＆＃13;

.container {
  display: flex;
  height: 100px;
  width: 100%;
}

.one {
  background: gold;
  box-sizing: border-box;
  flex: 1 0 50%;
  padding: 1% 15%;
}

.two {
  background: grey;
  flex: 1 0 50%;
}

＆＃13;

<div class="container">
  <div class="one">
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
  </div>
  <div class="two">
    two
  </div>
</div>

＆＃13;

Answer 2

更大量的填充当然会尝试获取盒子内的一些空间。让我解释一下我对此的看法。

小提琴中的每个盒子（让我们称之为单元格）获得50％的屏幕宽度。您在单元格的每一侧都给出了15em的水平填充。将单元格的box-sizing设置为border-box将使他们不会将填充添加到其净宽度，简而言之，您将避免使用它的大小问题。

那么为什么金盒会占据更大的尺寸？因为，15em的填充是一个很大的数字。你将无法看到它在更大的屏幕上占据更大的尺寸，因为15em可以在那里轻松调整。对于较小的屏幕，我认为你需要将15em缩小到较小的数量。

以下是一个例子：

/* Box-sizing reset */
*,
*:after,
*:before {
  box-sizing: border-box;
}

.container {
  display: flex;
  height: 100px;
  width: 100%;
}

.one {
  background: gold;
  flex: 1 0 50%;
  padding: 1em 2.5em;
}

.two {
  background: grey;
  flex: 1 0 50%;
}

@media only screen and (min-width: 1024px) {
  /* Larger padding for `.one` on bigger screens */
  .one {
    padding: 1em 15em;
  }
}

<div class="container">
  <div class="one">
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds
  </div>
  <div class="two">
    two
  </div>
</div>

上面，我已经使.one上的水平填充更小，使用box-sizing reset，并为更大的屏幕添加了媒体查询以显示更大的填充。

希望它有用。

Answer 3

对代码进行一些更改。将文本放在p元素中并为其添加一些css。

HTML

<div class="container">
  <div class="one">
    <p>one asfu adfhu sufdhu sudhfu  suadhf usdhf hus fds</p>
  </div>
  <div class="two">
  two
  </div>
</div>

CSS

.container {
  display: flex;
  height: 300px;
  width: 100%;
}
.one {
  background: gold;
  min-width:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.two {
  background: grey;
  min-width:50%;
}
p {
  background:red;
  padding: 1em 5em;
  max-width:50px;
}

链接到小提琴https://jsfiddle.net/ap53a3rw/1/

柔性盒和填充物？

3 个答案: