html - 如何正确嵌套flexbox实现表单布局？

Question

我希望实现以下布局:

我是这样描绘的(用网格):

• 黑条是导航(我们可以忽略它)
• 标题和副标题(紫色)- 它们应该对齐并占据宽度的大约 70% - 我想我已经做到了
• 一个有 3 列的表单(应该占 70% 的 70%，我不希望输入太宽)
  • 第 1 列:标题 + 文本对
  • 第 2 列:它将有一些图标/字符 - 这些必须完全对齐
  • 第 3 列:标题 + 输入框 - 它们的宽度必须相同

这是我的起始 HTML:

.title-container {
  display: flex;
  justify-content: center;
  background: red;
}

.title-item {
  flex-basis: 75%;
}

.data-container {
  display: flex;
  justify-content: center;
  background: blue;
}

.column-items {
  flex-basis: 70%;
  display: flex;
  flex-direction: row;
}

.column-1-item {
  background: green;
  flex-grow: 0.5;
}

.column-2-item {
  background: yellow;
  flex-grow: 0.1;
  align-self: center;
}

.column-3-item {
  background: orange;
  flex-grow: 1;
}

<div class="title-container">
  <div class="title-item">
    <h2>Title</h2>
    <p>This is some text</p>
  </div>
</div>

<div class="data-container">
  <div class="column-items">
    <div class="column-1-item">
      <p>Heading1</p>
      <p>SomeText</p>
    </div>
    <div class="column-2-item">
      <p>--></p>
    </div>
    <div class="column-3-item">
      <p>Heading1</p>
      <input type="text" name="lname">
    </div>
  </div>
</div>

我曾尝试对此进行扩展，但无论我尝试什么，我最终都会离我的设计更远，这让我觉得我的初始设计(和对 flex 的理解)有问题。如果我添加额外的“行”，它会破坏我的布局。我还认为我的 data-container 设置错误，因为这将占用比我想要的更多的空间

这是一个code pen .

有人可以帮助我更接近我的设计吗？

Answer 1

我会将整个 html 包装在 wrapper 类中，这样您就可以像这样获得页面的总体布局:

<div class="wrapper">
  <div class="title-container">
    <h2>Title</h2>
    <p>
      Subtitle should be aligned with title
    </p>
  </div>
  <div class="form-container">
    <div class="item">
      <div class="column">
      <p>Heading1</p>
      <p>Some Text</p>
      </div>
      <div class="column">
        <p>-></p>
      </div>
      <div class="column">
        <p>Heading1</p>
        <p>[ input textfield ]</p>
      </div>
     </div>
    <div class="item">
      <div class="column">
      <p>Heading3</p>
      <p>Some Text</p>
      </div>
      <div class="column">
        <p>-></p>
      </div>
      <div class="column">
        <p>Heading2</p>
        <p>[ input textfield ]</p>
      </div>
     </div>
    <div class="item">
      <div class="column">
      <p>Heading3</p>
      <p>Some Text</p>
      </div>
      <div class="column">
        <p>-></p>
      </div>
      <div class="column">
        <p>Heading3</p>
        <p>[ input textfield ]</p>
      </div>
     </div>
    <div class="item">
      <div class="column"></div>
      <div class="column"></div>
      <div class="column submit-button">
        <p>[ Button ]</p>
      </div>
    </div>
  </div>
</div>

然后您可以使用 width 属性指定 title-container 和 form-container 的宽度。使表单容器中的每个 item 类都具有 display:flex 属性，这样您就可以将子 column 类格式化为具有 flex -grow: 1 这样他们就可以填满可用空间。然后 css 看起来像:

.wrapper {
  display: flex;
  flex-direction: column;  
  align-items: center;
  outline: 1px solid red;
}

.title-container {
  width: 70%;
  outline: 1px solid red;
}

.form-container {
  width: 50%;
  outline: 1px solid red;
}

.item {
  display: flex;
  outline: 1px solid red;
}

.column {
  /* flex-grow: 1; */
  flex: 1 1 0px;
  outline: 1px solid red;
}

.submit-button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

或者，您可以从 column 类中删除 flex-grow: 1 属性，并将 justify-content: space-between 添加到item 类以获得类似于您的示例的结果。这是 codepen .