CSS flex 对齐按钮答案

【问题标题】：CSS flex align buttonsCSS flex 对齐按钮
【发布时间】：2019-06-14 17:14:34
【问题描述】：

我正在尝试学习使用 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>

【问题讨论】：

这里似乎没有足够的代码来重现该问题。请参阅How to create a Minimal, Reproducible Example：“尽可能少地使用代码......提供其他人需要的所有部分......确保它重现问题”。
我们不知道，您的预期结果是什么。你能说得更具体点吗？
如果您使用的是引导程序，请添加它的标签

标签： html css bootstrap-4 flexbox

【解决方案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;
 }

【讨论】：

【解决方案2】：

这里不需要添加额外的 CSS 属性，而是使用引导类

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div>
    <div class="row justify-content-center text-center">
        <div class="btnWrap col-12 col-md-6 col-lg" 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-12 col-md-6 col-lg" style="">
            <button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
        </div>
        <div class="btnWrap col-12 col-md-4 col-lg" style="">
            <button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
        </div>
        <div class="btnWrap col-12 col-md-4 col-lg" style="">
            <button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
        </div>
        <div class="btnWrap col-12 col-md-4 col-lg" style="">
            <button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

【讨论】：

【解决方案3】：

请看下面的sn-p。添加引导类以实现所需的结果

.btnWrap{
margin-top:10px
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row justify-content-center text-center">
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopNames" class="btn btn-secondary btn-top active" onclick="topButtonClick(this)">Najpogostejša imena</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopBabyNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Imena novorojenčkov</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopDisappearingNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Izginjajoča imena</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopModernNames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Sodobna imena</button>
        </div>
        <div class="btnWrap col-12 col-lg" >
            <button type="button" id="TopLastnames" class="btn btn-secondary btn-top" onclick="topButtonClick(this)">Najpogostejši priimki</button>
        </div>
    </div>
</div>

【讨论】：

您的答案不正确，因为 OP 需要 2 / 3 列连续，而您的答案不满足此需求