垂直对齐flex项目

我正在使用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>放置的位置扔下。我该如何告诉所有<button> s无论上方的<p>大小如何？

将.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>

jsfiddle

无需包装器或超过3个其他属性。将.card设置为flex：

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

将.card p设置为flex: 1

.card p {
  flex: 1;
}

尝试制作.card元素flex-parents本身，然后使用justify-content属性。

.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>

我正在与您合作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>

您需要添加显示：flex，flex-dicrection：列和正义 - 符合：空间之间。

您的新CSS .Card类看起来像：

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

我希望这对您有用！

相关内容

最新更新

热门标签：