Почему flexbox justify-content делает мои кнопки-блоки встроенными?

Question

Мои кнопки, которые отображаются блоком, должны быть центрированы прямо в середине их контейнера div.Но когда я использую justify-content, они становятся встроенными.Как сделать так, чтобы эти кнопки появлялись посередине и отображались вертикально внутри div?

#event-container {
        margin-top: 8%;
        margin-left: 5%;
        width: 30%;
        max-width: 400px;
        float: left;
        display: flex;
        justify-content: center;
        border-style: solid;
        border-width: 1px;
        border-color: #909090;
      }

    .events-category-button {
        border-style: solid;
        background-color: #fff;
        border-color: #D4D4D4;
        border-width: 1px;
        letter-spacing: .5px;
        border-radius: 30px;
        margin-top: 8%;
        margin-right: 5%;
        width: 140px;
        line-height: 2;
        height: 40px;
      }

<div id="event-container">

      <div class="event-item">
        <button type="button" class="event-category-button top">
          <div class="category-first"></div>
          <h4 class="event-category-name">First</h4>
        </button>
      </div>

      <div class="event-item">
        <button type="button" class="event-category-button">
          <div class="category-second"></div>
          <h4 class="event-category-name">Second</h4>
        </button>
      </div>
      
      <div class="event-item">
        <button type="button" class="event-category-button">
          <div class="category-third"></div>
          <h4 class="event-category-name">Third</h4>
        </button>
      </div>
    </div>

Answer 1

Для этого вам нужно изменить свойства css flex-direction и align-items.Значением по умолчанию для flex-direction является «row», которое вызывает это встроенное смотрящее размещение.Вы должны сделать это "столбец" или "обратный столбец", чтобы расположить элементы вертикально.

#event-container {
        margin-top: 8%;
        margin-left: 5%;
        width: 30%;
        max-width: 400px;
        float: left;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-style: solid;
        border-width: 1px;
        border-color: #909090;
      }

    .events-category-button {
        border-style: solid;
        background-color: #fff;
        border-color: #D4D4D4;
        border-width: 1px;
        letter-spacing: .5px;
        border-radius: 30px;
        margin-top: 8%;
        margin-right: 5%;
        width: 140px;
        line-height: 2;
        height: 40px;
      }

<div id="event-container">

      <div class="event-item">
        <button type="button" class="event-category-button top">
          <div class="category-first"></div>
          <h4 class="event-category-name">First</h4>
        </button>
      </div>

      <div class="event-item">
        <button type="button" class="event-category-button">
          <div class="category-second"></div>
          <h4 class="event-category-name">Second</h4>
        </button>
      </div>
      
      <div class="event-item">
        <button type="button" class="event-category-button">
          <div class="category-third"></div>
          <h4 class="event-category-name">Third</h4>
        </button>
      </div>
    </div>