Установите два элемента Flex рядом друг с другом в столбце flexbox

Question

У меня есть некоторые элементы, которые я отображаю в направлении столбца в контейнере display: flex.

Это помещает контейнеры в сложенный вид.

Скажем, у меня есть 5 составных элементов Iнужно, чтобы два из них отображали строку в линейном или гибком направлении.

Не помещая два рассматриваемых элемента в другой div , чтобы я мог применить строку направления гибкого сигнала к ...

Можно ли заставить эти элементы сидеть рядом?

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
    width: calc(50% - 10px);
    display: inline-block;
    float: left;
}

.flex-column .column-item:nth-of-type(4) {
    margin-right: 20px;
}

<div class="flex-column">
    <div class="column-item">a</div>
    <div class="column-item">b</div>
    <div class="column-item">c</div>
    <div class="column-item">d</div>
    <div class="column-item">e</div>
</div>

Answer 1

Попробуйте использовать flex-wrap: wrap, это свойство позволяет включить несколько строк в flexbox

Answer 2

Схема довольно проста с flexbox.Вам не нужно flex-direction: column.

Просто используйте flex-direction: row с flex-wrap: wrap.

. Затем сделайте каждый элемент достаточно длинным, чтобы занимать полный ряд.

Уменьшите flex-basis на элементах, которые должны совместно использовать строку.

.flex-column {
  display: flex;
  flex-wrap: wrap;
}

.column-item {
  flex: 1 0 61%;  /* flex-grow, flex-shrink, flex-basis */
  margin: 2px;
  background-color: lightgreen;
}

.column-item:nth-of-type(4),
.column-item:nth-of-type(5) {
  flex-basis: 40%;
}

<div class="flex-column">
  <div class="column-item">a</div>
  <div class="column-item">b</div>
  <div class="column-item">c</div>
  <div class="column-item">d</div>
  <div class="column-item">e</div>
</div>

С flex-grow: 1, определенным в стенографии flex, нет необходимости использовать calc().

Поскольку flex-grow будетпотребляя свободное место в строке, flex-basis должно быть достаточно большим, чтобы обеспечить перенос.В этом случае с flex-basis: 61% достаточно места для полей, но никогда не хватает места для второго элемента.

---

Существует еще более простое и эффективное решение с использованием CSS Grid:

.flex-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

.column-item:nth-of-type(-n + 3) {
  grid-column: span 2;
}

.column-item {
  background-color: lightgreen;
}

<div class="flex-column">
  <div class="column-item">a</div>
  <div class="column-item">b</div>
  <div class="column-item">c</div>
  <div class="column-item">d</div>
  <div class="column-item">e</div>
</div>

Answer 3

Я не думаю, что это возможно после того, как вы предоставили своему родителю свойство flex-direction:column;, в качестве альтернативы вы можете включить flex-wrap:wrap и контролировать ширину элементов, используя свойство flex-basis.Это позволяет вам достичь желаемого эффекта без изменения структуры HTML.

.flex-column {
    display: flex;
    flex-wrap:wrap;
}

.flex-column .column-item {
 flex-basis:100%;}
.flex-column .column-item:nth-of-type(4),
.flex-column .column-item:nth-of-type(5) {
    flex-basis:50%;
   
    
}

<div class="flex-column">
    <div class="column-item">a</div>
    <div class="column-item">b</div>
    <div class="column-item">c</div>
    <div class="column-item">d</div>
    <div class="column-item">e</div>
</div>