Выравнивание гибких элементов по вертикали - PullRequest
Новая
       21

Выравнивание гибких элементов по вертикали

1 голос
/ 16 мая 2019

Я делаю карты, используя 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> выстроиться в линию друг с другом независимо от размера <p> над ним?

Ответы [ 5 ]

3 голосов
/ 16 мая 2019
  • Установите .card на display: flex
  • Заключите h3, p в упаковку с flex: 1
  • Установите кнопку на 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 голосов
/ 16 мая 2019

jsFiddle

Нет необходимости в обертке или более чем 3 дополнительных свойствах.Установите .card для сгибания: 

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

Установите .card p на flex: 1

.card p {
  flex: 1;
}
1 голос
/ 17 мая 2019

Вам необходимо добавить display: flex, flex-dicrection: column и justify-content: space -ween.

Ваш новый класс css .card выглядит следующим образом: 

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

Надеюсь, это сработает для вас!

1 голос
/ 16 мая 2019

Я работаю с вами версия 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>
1 голос
/ 16 мая 2019

Попробуйте сами создать элементы .card flex-parent, затем поиграйте со свойством 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>
...