Выравнивание содержимого по вертикали в смежных контейнерах flexbox - PullRequest
Новая
       29

Выравнивание содержимого по вертикали в смежных контейнерах flexbox

3 голосов
/ 21 марта 2019

У меня есть несколько предметов, скажем карты. Эти карты должны складываться горизонтально, а высота должна быть одинаковой. Это происходит для меня.

На каждой карточке есть изображение, текст и кнопка. Изображение и текст для каждой карты должны иметь максимальную высоту для любой карты, чтобы они правильно выровнялись. Это не происходит для меня.

Если изображение и текст выровнены правильно, кнопка всегда будет выровнена на каждой карточке внизу.

Я следил за этим уроком , но у меня есть несколько карточек, здесь только три. Также высота изображения третьей карты задается с помощью CSS. 

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: flex;
  flex-wrap: wrap;
}

.partner-card {
  display: flex;
  flex: 1 0 20%;
  border-radius: 0;
  text-align: center;
  border: 3px solid blue;
  padding: 5px;/*3rem;*/
  margin-bottom: 3rem;
  max-width: 20%;
  margin: 5px;
}

.partner-card-content {
  display: flex;
  flex-direction: column;
}
/*
.card-content .image-container img {
  
  margin: 0;
  padding: 0;
}
*/
.partner-card-content .partner-image-container {
  border: 1px solid green;
  padding: 0;
  margin: 0;
  min-height: 11rem;
                display: flex;
                vertical-align: middle;
                align-items: center;
                justify-content: center;
                max-width: 100%;
}

.partner-card-content p /*, .card-content .image-container*/
{
  flex: 1 0 auto;
  border: 1px solid red;
}

.partner-card-content img.third-image {
  height: 5.5rem !important;
}
/*
p {
  font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/
<div class="partner-cards">

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>
  
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x100" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="primary-button" href="#">View ABC Offer</a>
    </div>
  </div>
</div>

Как это должно показать:

enter image description here

Изображение учебника на кодовой ручке, правильно выравнивает h2, текст и ссылку:

enter image description here

1 Ответ

1 голос
/ 22 марта 2019

TL; DR

Выравнивание элементов флексбокса в смежных флексбоксах невозможно в CSS. Вам действительно нужно sub-grids, чтобы решить эту проблему с динамическими размерами разделов на вашей карте.

Сценарий Flexbox

В любом случае, если у вас есть min-height для partner-image-container, так что, я думаю, вы можете установить либо min-height для a, либо многоточие , чтобы сохранить его в одной строке.См. Ниже решение, которое добавляет многоточие : 

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: flex;
  flex-wrap: wrap;
}

.partner-card {
  display: flex;
  flex: 1 0 20%;
  border-radius: 0;
  text-align: center;
  border: 3px solid blue;
  padding: 5px;/*3rem;*/
  margin-bottom: 3rem;
  max-width: 20%;
  margin: 5px;
}

.partner-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0; /* ADDED */
}


/*
.card-content .image-container img {
  
  margin: 0;
  padding: 0;
}
*/

.partner-card-content .partner-image-container {
  border: 1px solid green;
  padding: 0;
  margin: 0;
  min-height: 11rem;
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p/*, .card-content .image-container*/ {
  flex: 1 0 auto;
  border: 1px solid red;
}

.partner-card-content img.third-image {
  height: 5.5rem !important;
}


/*
p {
  font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/

.primary-button { /* ADDED */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<div class="partner-cards">

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x100" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="primary-button" href="#">View ABC Offer</a>
    </div>
  </div>
</div>

Обратите внимание, что вам придется добавить min-width: 0 к partner-card-content к переопределить настройку по умолчанию min-width: auto для flexboxв оси flex .Ниже приведены некоторые примеры такого поведения:

  • Flexbox влияет на поведение при переполнении

  • FlexboxИзменение размера и прокручиваемое переполнениеСценарий

    Вы можете сделать это по-другому, используя CSS Grid Layout - в качестве примера рассмотрим 3 карты, расположенные в ряд.Это работает для динамических высот каждой из секций карты - см. Демонстрацию ниже: 

    .partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: column;
  grid-column-gap: 10px;
}

.partner-card, .partner-card-content {
  display: contents;
}

.partner-card-content .partner-image-container {
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p {
  border: 1px solid red;
  margin: 0;
}

.partner-card-content a {
  border: 1px solid;
}
    <div class="partner-cards">
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>
</div>

    Но опять-таки у него есть ограничения, потому что вы не можете контролировать свой макет - у вас нет контроля над карты но вы работаете над содержанием карт здесь , что не очень полезно.Обратите внимание, что я использовал display: contents для элементов partner-card и partner-card-content.Когда будут реализованы sub-grids, у нас будет полное решение для таких макетов, как это - см. Также обсуждение ниже:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...