垂直对齐弹性项目答案

【问题标题】：Aligning flex items vertically垂直对齐弹性项目
【发布时间】：2019-10-04 04:26:57
【问题描述】：

我正在使用 flexbox(https://jsfiddle.net/vs37qo0r/) 制作卡片：

/* Only included flex related styles*/

.container {
  display: flex;
  flex-direction: row;
  /*default*/
  align-items: stretch;
  /*default*/
  justify-content: space-around;
}

.card {
  flex-basis: 20%;
}

<div class="container">
  <div class="card">
    <h3>Feature 1</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
    </p>
    <button type="button">Go Somewhere</button>
  </div>
  <!-- two more cards of same format-->
</div>

每个<h3> 和<p> 彼此对齐。但是，并非每个<p> 的大小都相同，然后会在<button> 的布局位置上抛出。无论上面的<p> 大小如何，我如何告诉所有<button>s 彼此对齐？

【问题讨论】：

我首先想到的是为每个p 设置一个固定高度，但我想这不是很方便。

标签： html css flexbox vertical-alignment

【解决方案1】：

将.card 设置为display: flex
用flex: 1 将h3, p 封装在一个包装器中
将按钮设置为flex-end

jfFiddle

 body{
    background-color: white;
    margin-top: 100px;
    padding: 0;
  }
  .container{
    display:flex;
    flex-direction: row; /*default*/
    align-items: stretch; /*default*/
    justify-content: space-around;
  }
  .card{
    border: 1px solid grey;
    border-radius: 3px;
    background-color: white;
    flex-basis: 20%;
    text-align: center;
    padding: 30px;
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
  }
  
  .card__content {
    flex: 1;
  }
  
  .button {
    align-self: flex-end;
  }

<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
<div class="container">
<div class="card">
 <div class="card__content">
 
  <h3>Feature 1</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
  </p>
  
 </div>
  <button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
  <h3>Feature 2</h3>
  <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
  </p>
  </div>
  <button type="button">Go Somewhere</button>
</div>
<div class="card">
<div class="card__content">
  <h3>Feature 3</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
  </p>
  </div>
  <button type="button">Go Somewhere</button>
</div>

</div>
</body>

【讨论】：

【解决方案2】：

jsFiddle

不需要包装器或超过 3 个附加属性。将.card 设置为弹性：

.card {
  display:flex;
  flex-direction: column;
  ....
}

将.card p 设置为flex: 1

.card p {
  flex: 1;
}

【讨论】：

这是一个很好的解决方案。 flex: 1;告诉所有p元素占用相同的空间吗？
谢谢。是的，好吧，flex 是flex-grow: 1 的简写，当它只有一个数字时。 flex-grow 有点复杂：它设置了一个比率，并设置了弹性容器中的剩余空间应该分配给该项目的多少。你可以read more here。

【解决方案3】：

尝试让 .card 元素自己成为 flex-parents，然后使用 justify-content property。

.card{
    …
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

body {
  background-color: white;
  margin-top: 100px;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  /*default*/
  align-items: stretch;
  /*default*/
  justify-content: space-around;
}

.card {
  border: 1px solid grey;
  border-radius: 3px;
  background-color: white;
  flex-basis: 20%;
  text-align: center;
  padding: 30px;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="card">
      <h3>Feature 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 2</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 3</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>

  </div>
</body>

【讨论】：

【解决方案4】：

我正在和你一起工作 jsfiddle 版本：

我在那里添加了这些额外的代码，你永远不必为它触摸你的 HTML！

.card{
 ...
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin-top: auto !important;
}

它工作正常！

body {
  background-color: white;
  margin-top: 100px;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  /* default */
  align-items: stretch;
  /* default */
  justify-content: space-around;
}

.card {
  border: 1px solid grey;
  border-radius: 3px;
  background-color: white;
  flex-basis: 20%;
  text-align: center;
  padding: 30px;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin-top: auto;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="card">
      <h3>Feature 1</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 2</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum
      </p>
      <button type="button">Go Somewhere</button>
    </div>
    <div class="card">
      <h3>Feature 3</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus arcu est, id mollis ex tincidunt blandit. Morbi dictum dignissim turpis. Ut lacus leo, sagittis at ullamcorper eu, auctor a arcu. Sed non mi sed turpis rhoncus faucibus eu viverra.
      </p>
      <button type="button">Go Somewhere</button>
    </div>

  </div>
</body>

【讨论】：

我强烈建议不要使用!important，除非绝对必要，例如覆盖第 3 方样式。如果都是你自己的 CSS，我认为没有理由使用 !important。
@seantunwin 这是我的错！没有那个就好了！重要。 :)

【解决方案5】：

你需要添加 display: flex, flex-direction: column 和 justify-content: space-between。

您的新 css .card 类如下所示：

.card{
    flex-basis: 20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

我希望这对你有用！

【讨论】：