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

 <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>
  

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

 #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>
  

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

Спасибо!

почему, когда я не размещаю их в «box», они отображаются как 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

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