为什么flexbox调整内容使我的“阻止”按钮内联？

Question

我的按钮（显示为块）需要在其div容器中间居中。但是，当我使用辩护内容时，它们会变成内联。如何使这些按钮显示在div的中间并垂直显示在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

为此，您需要修改flex-direction和align-items css属性。伸缩方向的默认值为“行”，这会导致内联外观放置。您应该将其垂直放置为“列”或“列反转”。

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