html - CSS flex 对齐按钮

Question

我正在尝试学习使用 flex 正确对齐按钮。

在桌面上看起来像我想要的:

在手机上纵向也是如此:

但是在横屏时，它看起来像这样:

我希望它看起来更整齐。

这是我这部分的代码:

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

<div>
  <div class="row">
    <div class="btnWrap col" style="">
      <button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Najpogostejša imena</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
    </div>
    <div class="btnWrap col" style="">
      <button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
    </div>
  </div>
</div>

Answer 1

你的 html 应该是这样的:

<div class="button-wrapper">
   <button>Name</button>
   <button>Name</button>
   <button>Name</button>
   <button>Name</button>
   <button>Name</button>
</div>

这是桌面的 css:

.button-wrapper{
  display:flex;
  align-items:center;
  justify-content: space-between;
  flex-direction: row;
 }

这是移动端的 css:

.button-wrapper{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }