Как выровнять блоки по горизонтали в CSS flex?

Попробуйте добавить это правило CSS:

.box {
    display: flex;
    flex-wrap: nowrap;
}

Вы делаете блоки div гибкими, но div, который действительно содержит блоки, является блоком div.

просто добавьте flex-direction, который принимает либо row, либо column

b1container {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
flex-direction :row;
background-color: #ffdeab;
border-radius: 10px;
transition: 0.5s;
cursor: pointer;
}

вот ссылка, которая очень хорошо объясняет flexbox Основные понятия флексбокса

Если вы не хотите, чтобы элементы переносились, когда ширина становится меньше, вы можете использовать flex-wrap

которому вы можете дать nowrap атрибут flex-wrap:nowrap;

.box не flex, а тот, что держит ящики попробуй это:

.box {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

этот код выровняет ваши поля

если вы хотите добавить размер префикса в каждое поле, вы можете попробовать:

.box > * {
  flex: 0 0 25%;
  width: 100%;
  max-width: 25%;
}

с этим вы можете установить класс коробки для переноса, и у вас есть 4 столбца в строке.

Вы вложили все .box элементы на несколько уровней внутрь .boxes, поэтому они расположены стопкой. Сделайте все .box элементы прямыми потомками .boxes и все заработает.

Механизм flexbox работает только на один уровень в глубину: родительский элемент контейнера flexbox (.boxes) содержит сгибаемые дочерние элементы (.box). Любой элемент внутри .box не затрагивается или, лучше сказать, не обрабатывается механизмом flexbox. Именно поэтому основная структура в вашем случае должна быть:

<div class = "boxes">
    <div class = "box"></div>
    <div class = "box"></div>
    <div class = "box"></div>
    <div class = "box"></div>
</div>

Я также добавил flex-flow: row wrap, чтобы .box элементы переносились на следующую строку, когда это необходимо.

.b1container {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffdeab;
    border-radius: 10px;
    transition: 0.5s;
    cursor: pointer;
}

.b1container:hover {
    width: 250px;
    height: 250px;
}

.s2boxImg {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    border: 3px dotted #553c2b;
    transition: 0.5s;
}

.s2boxImg:hover {
    width: 250px;
    height: 250px;
    border: 3px dotted #f36dcb;
    transition: 0.5s;
}

.boxes {
    display: flex;
    flex-flow: row wrap; /* ADDED to make content wrap */
    justify-content: space-evenly;
    justify-content: center;
    margin-top: 30px;
}

<div class = "section2">
    <h1 class = "s2h1">This is Random Info</h1>
    <div class = "boxes">

        <div class = "box">
            <div class = "b1container">
                <img src = "" alt = "Placeholder" class = "s2boxImg">
            </div>
            <h5 class = "b1Info">PlaceHolder Text</h5>
        </div>

        <div class = "box">
            <div class = "b1container">
                <img src = "" alt = "Placeholder" class = "s2boxImg">
            </div>
            <h5 class = "b1Info">PlaceHolder Text</h5>
        </div>

        <div class = "box">
            <div class = "b1container">
                <img src = "" alt = "Placeholder" class = "s2boxImg">
            </div>
            <h5 class = "b1Info">PlaceHolder Text</h5>
        </div>

        <div class = "box">
            <div class = "b1container">
                <img src = "" alt = "Placeholder" class = "s2boxImg">
            </div>
            <h5 class = "b1Info">Placeholder Text</h5>
        </div>
    </div>
</div>

Я думаю, что ваш стиль CSS правильный. Однако HTML структурирован неправильно. Логично, что div.boxes включает в себя кучу div.box. И у каждого div.box есть содержимое коробки; как в вашем случае div.b1container и тег h5. Однако вы вложили div.box внутрь div.box вместо div.boxes.

Вот рисунок того, как это должно быть структурировано:

Вот исправленный HTML-файл:

    <div class = "section2">
      <h1 class = "s2h1">This is Random Info</h1>
      <div class = "boxes">        
        <div class = "box">
          <div class = "b1container">
            <img src = "" alt = "Placeholder" class = "s2boxImg" />
          </div>
          <h5 class = "b1Info">PlaceHolder Text</h5>
        </div>

        <div class = "box">
          <div class = "b1container">
            <img src = "" alt = "Placeholder" class = "s2boxImg" />
          </div>
          <h5 class = "b1Info">PlaceHolder Text</h5>
        </div>

        <div class = "box">
          <div class = "b1container">
            <img src = "" alt = "Placeholder" class = "s2boxImg" />
          </div>
          <h5 class = "b1Info">PlaceHolder Text</h5>
        </div>

        <div class = "box">
          <div class = "b1container">
            <img src = "" alt = "Placeholder" class = "s2boxImg" />
          </div>
          <h5 class = "b1Info">Placeholder Text</h5>
        </div>
      </div>
    </div>