Flex воздействует на внутренние встроенные элементы

Question

Я бы хотел простую двухколоночную разметку Я не очень понимаю, почему это меняет все мои пролеты ведут себя как div. Как оставить внутренние элементы столбца без изменений?

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

<div class="row">
  <div class="column">
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
  </div>
  <div class="column">
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
  </div>
</div>

https://jsfiddle.net/23of4Lt5/

Answer 1

Это происходит из-за "flex-direction: column". Удалите это, и все должно быть хорошо. Что он делает, так это установив div столбца в «display: flex» и направление в качестве столбца, промежутки рассматриваются как элементы flex, но на вертикальной оси.

Answer 2

Хорошо, как только вы примените стиль flexbox, все элементы будут соответствовать свойствам css, которые применяют этот стиль. Вы можете изменить, чтобы использовать flex-direction: row, чтобы они вели себя как встроенные элементы.

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  flex: 1;
}

<div class="row">
  <div class="column">
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
  </div>
  <div class="column">
    <span>Text 1</span>
    <span>Text 2</span>
    <span>Text 3</span>
  </div>
</div>