Flexbox：2列网格，第一列为空

Question

是否可以对齐2列网格，其中第2行的项目与第2列对齐？这很难用文字解释，所以我制定了我的目标。

理想情况下，我更喜欢

• 没有通过JS交换CSS类。
• 标签有max-width，但在那之前长大。

Answer 1

将元素2和元素3放在另一个容器div元素中，这样它的每个子元素都将使用（容器的）宽度相同的宽度。给容器一个最大宽度，这样它就不会变得那么大。

制作元素1 float: left，使其只有在有足够空间时才会向左浮动。

这是基础知识。也许你需要媒体查询或进一步的样式来确定你想要的确切行为。

但这个想法是： 当屏幕有足够的宽度时，1个浮在容纳2和3的容器旁边。

Answer 2

事实证明，有两种可能的答案不会导致flexbox。

1. display: table-row
2. CSS网格

.tableContainer {
  display: table-row;
  background: red;
}
input {
  background: yellow;
}
label {
  background: aquamarine;
}
.inputLabel {
  display: table-cell;
}
.error {
  font-size: smaller;
  font-style: italic;
  display: table-row;
}

/* */ 

inputLabel_GridItem,
.error_GridItem {
  display: initial;
}

.inputLabel_GridItem {
  grid-area: label;
  padding: 20px;
}

.error_GridItem {
  color: white;
  background-color: red;
  grid-area: error;
  padding: 20px;
}

.gridContainer {
  display: grid;
  grid-template-columns: 100px 300px;
  grid-template-areas: "label input""....... error";
  grid-gap: 10px;
}

<h2> display: table </h2>

<form novalidate class="tableContainer">
  <label for="textField" class="inputLabel">Name</label>
  <input type=text id="textField" placeholder="full name" />
  <label for="textField" class="error">error</label>
</form>

<h2> CSS Grids </h2>
<form novalidate class="gridContainer">
  <label for="textField" class="inputLabel_GridItem">Name</label>
  <input type=text id="textField" placeholder="full name" />
  <label for="textField" class="error_GridItem">error</label>
</form>