Question

我有一个宽度为80vw的弹性框，其内容为align-items: center和justify-content: center。列中的所有项目在两边都有28px的边距。目前，它们非常薄，仅占用80vw的一部分。检查它的两侧会显示大量空白。

我仍然希望诸如文本之类的东西居中，但是诸如选择框之类的东西应该占据容器的整个宽度（包括边距）。

我在这里已经阅读了一些内容，并且尝试设置width: 100%，但这不仅忽略居中的css（将项目一直推到最左边），而且忽略了边距，并且边缘溢出了容器的整个宽度。

最后，我尝试使用calc并计算出80vw - 28px作为内部内容的宽度，但是这样做有些奇怪，只使用了一半的页边距，其余的从容器中溢出了

.outerContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: black;
}

.modalContainer {
  width: 80vw;
  background-color: white;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
 
.content1 {
  margin: 20px 28px 10px 28px;
  font-size: 27px;
  line-height: 21px;
}

.content2 {
  margin: 10px 28px 20px 28px;
}

<html>
  <body>
    <div class="outerContainer">
      <div class="modalContainer">
        <div class="content1">
          Hello, World!
        </div>
        <div class="content2">
           <input type="text" />
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

您可以使用calc函数（将内容添加到我在下面更改的行中添加注释），使内容div的宽度减去边距为100％：

.outerContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: black;
}

.modalContainer {
  width: 80vw;
  background-color: white;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
 
.content1 {
  margin: 20px 28px 10px 28px;
  font-size: 27px;
  line-height: 21px;
}

.content2 {
  margin: 10px 28px 20px 28px;
  width: calc(100% - 56px);    /* 100% width minus 28px x 2 */
}


.content2 > input {
    width:100%;              /* make input stretch full width */
}

<html>
  <body>
    <div class="outerContainer">
      <div class="modalContainer">
        <div class="content1">
          Hello, World!
        </div>
        <div class="content2">
           <input type="text" />
        </div>
      </div>
    </div>
  </body>
</html>

保证金+？ = flexbox中的宽度为100％

1 个答案: