将物品均匀地排列在容器中，同时记住它们的原始位置

Question

我想用html和css让它看起来像标题。

要求如下：

• 有一个父元素、一些子元素和一些孙元素。
• 子元素以 6:4 的比例水平对齐，间距相等。
• 孙子元素内部等间距排列。比例 6 一侧有 3 个文本框，比例 4 一侧有两个按钮。
• 可以删除多个孙元素。在这种情况下，我想删除第二个文本框和第一个按钮。
• 即使我删除了孙子元素，我也想将其他项目保留在原来的位置。

（如图所示）
（删除元素时的图）

下面是我创建的实际代码。

.container {
  display: flex;
  width: 100%;
}

.left {
  flex: 6;
  display: flex;
}

.right {
  flex: 4;
  display: flex;
}

.text-box {
  margin: 5px;
  padding: 10px;
  border: 1px solid black;
  flex-grow: 1;
  width: calc(100% / 3 - 10px);
}

.button {
  margin: 5px;
  padding: 10px;
  border: 1px solid black;
  flex-grow: 1;
  width: calc(100% / 2 - 10px);
}

<div class="container">
  <div class="left">
    <input class="text-box" placeholder="Text Box 1">
    <input class="text-box" placeholder="Text Box 2">
    <input class="text-box" placeholder="Text Box 3">
  </div>
  <div class="right">
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
  </div>
</div>

如果删除文本框 2，则文本框 1 和 3 将扩展，如果删除按钮 1，则按钮 2 将扩展该量。
我想将 Text Box1、Text Box3 和 Button2 保留在其原始位置，而不拉伸任何一个元素。

我的母语不是英语，所以我使用翻译器，可能很难阅读。谢谢。

Answer 1

Flex 并不是解决这个问题的好办法。 Flex 定义了一堆元素如何相互关联，但无法独立于元素定义空间。

网格可以让你做到这一点。网格的结构是独立于其内容元素定义的。

在这种情况下，您需要一个包含两个内部网格的外部

grid

。

body {
  margin: 0;
  font-size: 12px;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1em;
  padding: 1em;
  border: 1px solid red;
  margin-bottom: 1em;
}

.left, .right {
  display: grid;
  gap: 1em;
  padding: 1em;
  border: 1px solid blue;
}

.left {
  grid-template-columns: repeat(3, 1fr);
  background: cyan;
}

.right {
  grid-template-columns: repeat(2, 1fr);
  background: lime;
}

.text-box, .button {
  padding: 5px;
  border: 1px solid black;
  background: white;
  text-align: center;
}

.t1, .b1 {
  grid-column: 1;
}

.t2, .b2 {
  grid-column: 2;
}

.t3 {
  grid-column: 3;
}

<div class="container">
  <div class="left">
    <div class="text-box t1">T1</div>
    <div class="text-box t2">T2</div>
    <div class="text-box t3">T3</div>
  </div>
  <div class="right">
    <div class="button b1">B1</div>
    <div class="button b2">B2</div>
  </div>
</div>

<div class="container">
  <div class="left">
    <div class="text-box t1">T1</div>
    <div class="text-box t3">T3</div>
  </div>
  <div class="right">
    <div class="button b2">B2</div>
  </div>
</div>