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

我的按钮（显示为块）需要在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>

最佳答案

您需要为此修改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>

关于html - 为什么flexbox调整内容使我的“阻止”按钮内联？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53486259/