Почему мне нужно «объединить» оба объекта, чтобы использовать «display: flex;» CSS?

Question

В этом коде оба поля будут отображаться в строке вместе (по горизонтали)

<style>
  #box{
    display: flex;
    height: 500px;

  }
#box-1 {
    background-color: blue;
    width: 50%;
    height: 50%;
  }

#box-2 {
    background-color: red;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

Почему, когда я не расположил их под "полем", они отображаются как 2 отдельных элемента, один под другим?Почему это не отображается так же, как в коде выше, хотя я использовал display: flex; в обоих стилях коробки.Как я понял (из чтения онлайн), эта функция была необходима для того, чтобы они оба выглядели так, как показано в коде выше

#box-1 {
    background-color: blue;
    width: 50%;
    height: 50%;
    display: flex;
  }

#box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
    display: flex;
  }
</style>

<div id="box-1"></div>
<div id="box-2"></div>

Я ожидал, что второй код должен давать то же самое, что и первый.Я понял, что, вероятно, я не прав (по результатам), но не могу понять, почему.

Спасибо!

Answer 1

почему, когда я не размещаю их под "полем", они отображаются как 2 отдельных элемента

Это потому, что div элементы по умолчанию имеют display:block, что означает, что он занимает собственную строку слева направо, поэтому они укладывают один под другим

Однако display:flex делает элемент block level flex container таким же, как block, только на детей это тоже влияет, дети становятся flex items, где вы можете управлять с помощью свойств flex ^ref , и по умолчанию оно имеет свойство flex-direction, установленное на row, означает, что flex items будет отображаться горизонтально в виде строки

Демо

.box {
  display: flex;
  height: 100px;
  width:100px;
}

.box-1 {
  background-color: blue;
  flex: 1;
}

.box-2 {
  background-color: red;
  flex: 1
}

.row {
  flex-direction: row;
}

.column {
  flex-direction: column;
}

<h2>flex-direction: row</h2>
<div class="box row">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>


<h2>flex-direction: column</h2>
<div class="box column">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>

Возможно, стоит рассмотреть возможность использования свойства flex вместо width

Answer 2

То, что заставляет ваши 'box1 и box2 отображаться в одной строке, это настройка display: flex в их родительском элементе - элементе #box! Это делает его дочерние элементы «гибкими элементами» - дочерние элементы не нуждаются в настройках any , чтобы стать гибкими элементами (вы можете стереть изгибаемые элементы из правил для дочерних элементов), это все из-за настройки в родительском элементе.