为什么 flexbox justify-content 使我的“块”按钮内联？答案

【问题标题】：Why is flexbox justify-content making my 'block' buttons inline?为什么 flexbox justify-content 使我的“块”按钮内联？
【发布时间】：2019-04-28 09:38:49
【问题描述】：

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

【问题讨论】：

标签： html css button flexbox

【解决方案1】：

您需要为此修改 flex-direction 和 align-items css 属性。 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>

【讨论】：