Сохранение flexbox по центру, когда текст обертывается до 2 или более строк

Я пытаюсь центрировать два элемента div бок о бок в строке с flexbox (display:flex).

Первый элемент div, слева, имеет только изображение.

Второй элемент div, справа, имеет выровненный по левому краю встроенный текст неопределенной длины.

Когда строка текста достаточно короткая, чтобы соответствовать одной строке, оба divs выравниваются и выравниваются по центру, как я ожидаю.

Когда строка текста достаточно длинна для переноса на две строки, второй элемент div не обертывается вокруг содержимого, как я ожидаю. Вместо этого он оставляет большое белое пространство в правой части div.

Я издевался над примером: http://codepen.io/anon/pen/NGqYQX?editors=110. Измените ширину окна браузера, чтобы увидеть, что я имею в виду.

Как я могу установить второй элемент div, чтобы сжиматься, чтобы соответствовать тексту, так что оба элемента div выглядят центрированными?

HTML:

<div> 
 <div>
 
 </div>
 <div>
 This is an example of a line of text.
 </div> 
</div>

<div>
 <div>
 
 </div>
 <div>
 This is an example of a much loooooooooooooonger line of text.
 </div>
</div>

CSS

.flexbox-container {
 display: flex;
 justify-content: center;
 align-items: center;
}
.div1 {
 margin-right: 30px;
}
.div2 {
 font-size: 48px;
 line-height: 48px;
 text-align: left;
}

Вот макет Photoshop, показывающий, что я пытаюсь сделать:

1 ответ

Чтобы достичь вашей цели (как указано на втором изображении), нам нужно внести несколько изменений в ваш HTML и CSS. Все можно сделать с помощью flexbox.

HTML

<div id="flex-container-main">
 <div>
 <figure>
 
 </figure>
 <p>This is an example of a line of text.</p> 
 </div>
 <div>
 <figure>
 
 </figure>
 <p>This is an example of a much loooooooooooooonger line of text.</p>
 </div>
</div><!-- end #flex-container-main -->

CSS

#flex-container-main {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.flex-container-child {
 display: flex;
 align-items: center;
 min-height: 127px;
 width: 75%;
 margin: 10px;
}
figure {
 margin: 0 20px 0 0;
 }
img {
 width: 150px;
 height: 127px;
 vertical-align: bottom;
} 
p { 
 font-size: 48px;
 margin: 0;
}

Пересмотренная демонстрация Codepen

Вот что происходит...

В вашем вопросе спрашивается:

Сохранение flexbox с центрированием при переводе текста на две или более строк

Я пытаюсь центрировать два элемента div рядом друг с другом с помощью flexbox (display:flex).

Позвольте быстро перейти к вашим двум изображениям.

Изображение 1

Изображение 2

В изображении 1 все элементы гибки фактически центрированы. Синяя подсветка из Chrome Dev Tools подчеркивает этот момент. Каждый элемент идеально расположен на экране.

Да, он становится немного неуклюжим, поскольку вы уменьшаете размер экрана меньше - ndash; главным образом из-за большого размера шрифта – но элементы гибкости остаются тем не менее центрированными.

В изображении 2 элементы гибки не равномерно центрированы. То, что вы создали в своем макете, больше похоже на столбец, содержащий оба flexboxes, и столбец центрирован. Но индивидуально только первая строка центрируется на экране.

Несколько заметок о вашем коде:

  • При объявлении justify-content в контейнерах flex вы центрируете элементы flex. Сам контейнер гибки не центрирован.
  • Поскольку оба flexboxes являются прямыми дочерними элементами , а не имеет определенной ширины, flexboxes выравниваются по отношению к окну просмотра.

Итак, чтобы добиться желаемого эффекта, мы можем обернуть всю существующую надпись в новом гибком контейнере (#flex-container-main). Это преобразует исходные гибкие контейнеры в гибкие элементы, которые затем могут быть равномерно центрированы как группа.

Новые элементы flex (теперь классифицируются как .flex-container-child) имеют ширину для создания пространства и минимальную высоту в зависимости от высоты изображения. Каждый элемент flex также объявляется родителем flex (display: flex), который позволяет нам использовать свойства flex для дочерних элементов. В частности, это полезно для вертикального центрирования текста (как показано на ваших изображениях).

(Обратите внимание, что для использования кода не требуется использование семантических элементов HTML. Если вы предпочитаете, чтобы оригинальные теги div просто меняли их обратно. Важной настройкой является новый родительский контейнер.)

Наконец (и это может быть не важно для вашего макета, но на всякий случай), браузеры обычно дают изображениям небольшой пробел пробела под их нижней границей. Это используется для размещения descenders. С vertical-align: bottom это пространство удаляется. (Подробнее см. мой ответ о descenders.)

licensed under cc by-sa 3.0 with attribution.