Выравнивание содержимого Flexbox

Я изо всех сил пытался сделать так, чтобы содержимое элементов flexbox было одинаково выровнено.

Как видите, три из них имеют одинаковую высоту, но я хочу добиться, чтобы все абзацы выровнялись / масштабировались с другими.

.grid-chefs {
  display: flex;
  width: 100%;
  text-align: center;
  align-items: stretch;
}

.cfcol {
  width: 32%;
  line-height: 1.2;
}

.cfcol>img {
  max-width: 100%;
  max-height: 100px;
}

.cfcol>h3 {
  font-size: 22px;
}

<div class = "grid-chefs">
  <div class = "cfcol">
    <img src = "img/chef.jpg" />
    <h3>John Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class = "cfcol">
    <img src = "img/chef.jpg" />
    <h3>John Smith</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class = "cfcol">
    <img src = "img/chef.jpg" />
    <h3>John Smith Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

Для этого вам нужно добавить min-height к вашим тегам h3.

— 30.11.2018 12:11

Все абзацы хорошо выровнены. Не могли бы вы пояснить, как вы хотите их совместить?

— 30.11.2018 12:16

Это невозможно с flexbox и этой структурой HTML. Эти элементы h3 не имеют никакого отношения друг к другу, на котором это могло бы быть основано.

— 30.11.2018 12:18

В CSS НЕТ метода для выравнивания элемента, не имеющего общего родителя.

— 30.11.2018 12:21

html css flexbox

30.11.2018 12:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Как я уже прокомментировал, вам нужно добавить min-height в свои теги h3

Или подумайте об уменьшении размера шрифта ваших заголовков.

Попробуй это

        .grid-chefs {
        display: flex;
        width: 33%;
        text-align: center;
        align-items: center;
        justify-content: space-between;
        margin:auto;
    }

    .cfcol {
        width: 32%;
        line-height: 1.2;
    }

    .cfcol > img {
        max-width: 100%;
        max-height: 100px;
    }

    .cfcol > h3{
        font-size: 22px;
        min-height:75px;
        display:flex; 
        align-items: center;
    }

    <div class = "grid-chefs">
            <div class = "cfcol">
                <img src = "img/chef.jpg" />
                <h3>John Doe</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class = "cfcol">
                <img src = "img/chef.jpg" />
                <h3>John Smith</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class = "cfcol">
                <img src = "img/chef.jpg" />
                <h3>John Smith Doe</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

Также рабочий пример кода: https://codepen.io/anon/pen/VVqrYL

Рад помочь вам в любое время: D

— 01.12.2018 05:39

30.11.2018 12:18

CSS Flexbox не позволяет выравнивать элементы внутри отдельных родительских элементов. Вы можете обойти это, используя новый макет CSS Grid с display: contents для столбцов, но поддержка браузера для последнего все еще далек от удовлетворительного.

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

.grid-chefs {
  display: grid;
  grid-auto-flow: column;
  width: 100%;
  text-align: center;
  align-items: stretch;
  grid-template-rows: auto auto auto;
}

.cfcol {
  width: 32%;
  line-height: 1.2;
  display: contents;
}

.cfcol>img {
  max-width: 100%;
  max-height: 100px;
}

.cfcol>h3 {
  font-size: 22px;
}

<div class = "grid-chefs">
  <div class = "cfcol">
    <img src = "img/chef.jpg" />
    <h3>John Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class = "cfcol">
    <img src = "img/chef.jpg" />
    <h3>John Smith</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class = "cfcol">
    <img src = "img/chef.jpg" />
    <h3>John Smith Doe</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

30.11.2018 12:30

Другие вопросы по теме

Как сделать &: hover доступным? Могу ли я использовать фокус и наведение вместе?

Bootstrap 3 Макет полной ширины и высоты с 3 столбцами Flex или Col

Ищете способ исправить предварительный просмотр кода CSS

Как избавиться от серого наложения на переходе Three.js?

Как поместить раскрывающуюся кнопку в HTML-таблицу с помощью JavaScript?

Ошибка Cors при загрузке локальных файлов css и js

VueJs: цвет фона выпадающих элементов

CSS-переход с непрозрачностью запускает только односторонний

Ошибка переполнения текста Firefox: многоточие в дочернем элементе

Заголовки исчезают при открытии окна

Выравнивание содержимого Flexbox

Ответы 2

Другие вопросы по теме

Похожие вопросы