flex 属性与按钮高度混淆？

Posted 2023-03-05

【中文标题】flex 属性与按钮高度混淆？

【英文标题】：flex property messes with button height?

【发布时间】：2016-05-15 09:21:50

【问题描述】：

我正在使用引导程序并使用 flex 进行布局。

当前按钮正在占用容器的高度。文本下方有很多空间，我想删除 i 并且当我向按钮添加填充时，它的大小变得不均匀。我试图按行高调整大小，但我试图找到实际的解决方案以及我遇到此问题的原因。

我在这里缺少 flex 的任何东西还是其他东西？ 任何帮助将不胜感激。 谢谢。

.vessel-card 
  display: flex;
  flex-direction: column;

.vessel-card h3 
  margin: 0;
  padding: 20px 0;

.departure-card 
  display: flex;
  padding: 20px 0;
  border-top: 2px solid #888;

.departure-card p 
  margin-right: 10px;

.departure-card:last-child 
  border-bottom: 2px solid #888;

.departure-card .btn-explore 
  border: 1px solid #000;
  display: inline-block;
  text-transform: uppercase;
  color: #000;
  border-radius: 0;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4 vessel-card">
      <a href="cienfuegos-from-havana.html" class="special-departure">
        <img src="http://placehold.it/350x150">
      </a>
      <h3>Vessel: Panorama</h3>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999</p>
        <a href="#" class="btn btn-explore">Explore</a>
      </div>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999</p>
        <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a>
      </div>
    </div>
  </div>
</div>

【参考方案1】：

这是一个更简单的解决方案。此解决方案将按钮水平居中对齐，不会与按钮或其他子元素的高度混淆。

.parent 
  display: flex;
  align-items: center;

【参考方案2】：

有两种可能的解决方案

1. d-flex 和 align-items-* 可以帮助您。

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

<div class="d-flex justify-content-center align-items-center bg-info" style="height: 160px;">
  <button class="btn btn-success">align-items-* saved me :)</button>
</div>

2.不需要css，只需用span或div包裹button即可

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

<div class="d-flex justify-content-around bg-info" style="height: 160px;">
  <span>
    <button class="btn btn-success">span or div saved me :)</button>
  </span>
 
  <button class="btn btn-danger">Aw, flex infected me ;(</button>
</div>

【参考方案3】：

Flexbox 使项目与 height 相同，如您在此处看到的 Demo ，但您可以使用 align-items 来更改它，或者在您的情况下使用 Demo

.parent 
  align-items: center;
  display: flex;


.child 
  border: 1px solid black;
  margin: 5px;


.child:first-child 
  height: 100px;

<div class="parent">
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

【讨论】：

不客气。补充一下，p 标签上有默认的margin，也可以使用其他align-items 选项，例如flex-startjsfiddle.net/6qym530t/2

flex-start 是做什么的？

它类似于 vertical-align: top 用于弹性项目，但不同的是它实际上可以工作 :)

使用align-items: start在顶部垂直对齐。

【参考方案4】：

您需要在段落中包含按钮。我还在5px 的按钮中添加了padding，这样该框就不会太靠近文本，但是可以根据您的需要更改该值，或者如果不需要，可以将其完全删除。

.vessel-card 
  display: flex;
  flex-direction: column;

.vessel-card h3 
  margin: 0;
  padding: 20px 0;

.departure-card 
  display: flex;
  padding: 20px 0;
  border-top: 2px solid #888;

.departure-card p 
  margin-right: 10px;

.departure-card:last-child 
  border-bottom: 2px solid #888;

.departure-card .btn-explore 
  border: 1px solid #000;
  display: inline-block;
  text-transform: uppercase;
  color: #000;
  border-radius: 0;
  padding: 5px;

<div class="container">
  <div class="row">
    <div class="col-md-4 vessel-card">
      <a href="cienfuegos-from-havana.html" class="special-departure">
        <img src="http://placehold.it/350x150">
      </a>
      <h3>Vessel: Panorama</h3>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999
          <a href="#" class="btn btn-explore">Explore</p></a>
      </div>
      <div class="departure-card">
        <p>Havana to Cienfuegos starting at $5,999
          <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</p></a>
      </div>
    </div>
  </div>
</div>