CSS Flexbox — это мощный модуль макета, позволяющий создавать гибкие и адаптивные дизайны. В этой статье мы рассмотрим различные методы создания макета из двух столбцов с использованием Flexbox. Мы предоставим примеры кода для каждого метода, чтобы помочь вам понять и реализовать их в своих проектах.

Метод 1: использование Flexbox со столбцами фиксированной ширины

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

.container {
  display: flex;
}
.column {
  flex: 1;
  width: 50%;
}

Метод 2: использование Flexbox со столбцами процентной ширины

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

.container {
  display: flex;
}
.column {
  flex: 1;
}

Метод 3: использование Flexbox со свойством Flex-Grow

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

.container {
  display: flex;
}
.column {
  flex-grow: 1;
}

Метод 4. Использование Flexbox с медиа-запросами для адаптивного макета

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}
.column {
  flex: 1 0 50%;
}
@media (max-width: 768px) {
  .column {
    flex-basis: 100%;
  }
}

В этой статье мы рассмотрели несколько методов создания двухколоночного макета с помощью CSS Flexbox. Каждый метод имеет свои преимущества и может быть адаптирован в соответствии с вашими конкретными требованиями к проектированию. Независимо от того, предпочитаете ли вы столбцы с фиксированной шириной или адаптивный макет, Flexbox обеспечивает гибкость и контроль, необходимые для создания современного и динамичного веб-дизайна.