Question

我想要一个包含随机数量元素（奇数或偶数）的flexbox 2x2网格。我已经实现了创建这个flexbox没有任何问题。

当我添加我的内容时：宽度为100％的输入字段我注意到那些比它们的弹性容器大，这看起来很奇怪。在示例中，这很容易在最后一个红色框中找到。

如何将输入字段设为灵活容器的100％？

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
}
.grid-item {
  flex: 1 1 50%;
  background: #F90;
  border-top: solid 1px #000;
}
.grid-item:nth-child(odd) {
  background: #F00;
  flex: 0 0 50%;
}

input {
  width: 100%;
}

<div class="flex-grid">
  <div class="grid-item">
    <input type="text" value="email">
  </div>
  <div class="grid-item">
    <input type="text" value="email">
  </div>
  <div class="grid-item">
    <input type="text" value="email">
  </div>

</div>

小提琴：https://jsfiddle.net/x3pyenkL/

Answer 1

来自Documentation：

box-sizing属性用于更改用于计算元素宽度和高度的默认CSS框模型。

为box-sizing: border-box元素设置<input>。

input {
  box-sizing: border-box;
  width: 100%;
}

或者更好地为页面的所有元素添加一致性。

* {
  box-sizing: border-box;
}

＆＃13;

.flex-grid {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
}
.grid-item {
  flex: 1 1 50%;
  background: #F90;
  border-top: solid 1px #000;
}
.grid-item:nth-child(odd) {
  background: #F00;
  flex: 0 0 50%;
}

input {
  box-sizing: border-box;
  width: 100%;
}

＆＃13;

<div class="flex-grid">
  <div class="grid-item">
    <input type="text" value="email">
  </div>
  <div class="grid-item">
    <input type="text" value="email">
  </div>
  <div class="grid-item">
    <input type="text" value="email">
  </div>

</div>

＆＃13;

Flexbox 2x2网格 - 输入内部溢出Flex容器

1 个答案: