Невозможно отправить второй элемент на следующую строку на гибком дисплее

Я работаю над этой демонстрацией. Почему я не могу отправить p на вторую строку гибкого содержимого?

body,
html {
  height: 100%;
  width: 100%
}

div {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
}

<div>
  <h1>Line One</h1>
  <br />
  <p>Line Two</p>
</div>

css flexbox

08.01.2019 01:10

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

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

Ответы 2

Вы должны установить pwidth на 100% и установить его родительский flex-wrap: wrap, иначе h1 и p сожмутся, чтобы соответствовать.

body,
html {
  height: 100%;
  width: 100%
}

div {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

p {
  width: 100%;
}

<div>
  <h1>Line One</h1>
  <p>Line Two</p>
</div>

Вы также можете создать .breaker с width: 100% и display: block:

body,
html {
  height: 100%;
  width: 100%
}

.wrapper {
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.breaker {
  width: 100%;
  height: 0;
  display: block;
}

<div class = "wrapper">
  <h1>Line One</h1>
  <div class = "breaker"></div>
  <p>Line Two</p>
</div>

08.01.2019 03:07

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

добавить направление гибкости: столбец; в родительском div

11.01.2019 13:35

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

Как центрировать столбцы в сетке, когда недостаточно элементов для заполнения строки

Масштабирование изображений внутри div с текстом

Почему обертывание изображения с помощью div во флексбоксе правильно масштабирует его, но элемент img не масштабируется?

Flex align center приводит к тому, что br после a не работает?

Выровнять по правому краю вертикально центрированную ячейку сетки?

Расставьте приоритеты внутри flexbox

Чего достигают единицы по первому значению при использовании сокращения "flex"?

Иконки внутри кнопок смещаются вправо, когда вступает в игру порог максимальной ширины

Нижний колонтитул внизу с использованием позиции: фиксировано, но с сохранением промежутка между ними

@ angular / flex-layout с расстоянием между строками и столбцами?

Невозможно отправить второй элемент на следующую строку на гибком дисплее

Ответы 2

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

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