Flex显示为按钮提供自动高度[重复]答案

【问题标题】：Flex display gives auto height to a button [duplicate]Flex显示为按钮提供自动高度[重复]
【发布时间】：2021-03-10 10:53:55
【问题描述】：

我有一个父 div，里面有一个 <h1> 和一个 <button>。我用 justify content-between 浮动它们。因为，父 div 有一个 d-flex 类，所以按钮的高度会和这个父 div 一样。

我该如何解决？对于按钮，我只需要一些填充。

他们没有任何 CSS，只有一些颜色和背景颜色..

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>

【问题讨论】：

您应该提供足够的代码来重现该问题，否则您将难以提供答案和帮助您。

标签： html css bootstrap-4 flexbox

【解决方案1】：

您必须将align-self-start 添加到span 以避免拉伸效果。

.velemeny_btn {
  background: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
    <div class="col-12 d-flex justify-content-between">
        <h1 class="page_title mb-4">Vélemények</h1>
        <span class="btn velemeny_btn align-self-start"><i class="fa fa-user-edit mr-1"></i> Vélemény írása</span>
    </div>
    <div class="col">
        <div class="content"></div>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以使用引导类：align-items-baseline来执行水平对齐

<div class="row">
   <div class="col-12 d-flex justify-content-between align-items-baseline">
      <h1 class="page_title mb-4">Vélemények</h1>
      <button class="btn btn-primary">Test</button>
   </div>
  <div class="col">
     <div class="content"></div>
  </div>
</div>

在此处了解有关 Flexbox 的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：