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>

我试图对此进行扩展，但是无论我尝试什么，我最终都离我的设计越来越远，使我认为我的初始设计（以及对灵活性的理解）有问题。如果添加其他“行”，则会破坏我的布局。我还认为我的data-container设置错误，因为这将占用比我想要的空间还要多的空间

这里是code pen。

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

Answer 1

您的.data-container只需要一个flex-direction: column;，因为您想堆叠.column-items。

Answer 2

我会将整个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>

然后，您可以使用title-container属性为form-container和width指定宽度。通过使表单容器中的每个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;
}

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

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

2 个答案: