Как правильно вложить 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>

Я пытался расширить это, но, что бы я ни пытался, я в конечном итоге отошел от своего дизайна, заставляя меня думать, что с моим что-то не такпервоначальный дизайн (и гибкое понимание). Если я добавлю дополнительную строку, это нарушит мой макет. Я также думаю, что мой data-container неправильно настроен, поскольку это займет гораздо больше места, чем я хочу

Вот кодовое перо .

Может ли кто-нибудь помочь мне приблизиться к моему дизайну?

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>

Затем вы можете указать ширину для 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, чтобы получить результат, аналогичный вашему примеру. Вот кодекс .

Answer 2

Ваш .data-container просто нуждается в flex-direction: column;, потому что вы хотите, чтобы .column-items складывался.