Flex не соблюдая максимальную ширину

Question

У меня есть кусок текста. Мои заголовки должны быть go шире, чем текст абзаца. Чтобы сделать это возможным, я использую max-width. Первая проблема состоит в том, что мой единственный параграф слова центрирован. Я исправляю это с помощью width, но как только я это сделаю, max-width больше не применяется. Это почему? Как я могу это исправить?

• Вы можете быть креативным, но решения JS - это не go для меня здесь.
• Я знаю, что могу обернуть элементы, чтобы придать им стиль индивидуально, но я не хочу, чтобы от меня требовалось добавлять дополнительную разметку в html.
• . Позже у меня могут быть изображения et c, которые также не соответствуют ширине абзаца. Поэтому лучше использовать менее хакерское решение в долгосрочной перспективе.

Пример

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

.text {
  width: 840px;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  max-width: 640px;
  text-align: center;
}

p {
  max-width: 400px;
  width: 400px;
  /* To prevent the one word to be centered */
}

<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>
  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>
  <p>
    One word.
  </p>
</div>

Answer 1

Я исправляю это с помощью width, но как только я это сделаю, max-width больше не применяется. Это почему? Как я могу это исправить?

Почему это так?

Поскольку у вас есть align-items: center на контейнере. В контейнере в направлении столбца, который горизонтально центрирует изгибаемые элементы.

Центрирование начинается с середины и выходит одинаково с обеих сторон. Поэтому, когда вы используете max-width с коротким содержимым, текст будет отображаться по центру под большим абзацем, приведенным выше.

Но если вы используете width: 400px, элемент будет такой же длины, как полный абзац выше и содержание, по умолчанию выравнивается по левому краю. (Если вы установите p на text-align: center, тогда ваш эксперимент завершится неудачей с width: 400px или без него.)

.text {
  width: 840px;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  max-width: 640px;
  text-align: center;
  border: 1px dashed red;
}

p {
  width: 400px;
  text-align: center;
  border: 1px dashed red;
}

<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>

  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>

  <p>
    One word.
  </p>
</div>

Как это исправить?

Без JS или дополнительных HTML контейнеров Я не являюсь уверен, что это возможно, потому что нет выравнивания по левому краю для абзацев. Они просто центрируются в зависимости от длины их содержимого до максимальной ширины.

Answer 2

Окружите свои <p> метки в <div>. Затем к этому элементу применяется центрирование, и вы можете выравнивать теги <p> по своему усмотрению. Скрипка здесь .

Answer 3

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

Итак, дело в том, что вы не хотите используйте min-width, потому что это заставляет p иметь такую ​​же ширину, даже когда у него нет места, как предполагалось.

Вместо этого вы должны указать p, чтобы он адаптировался к пространству, которое он имеет, но только вверх до 400 пикселей. Это достигается с помощью max-width.

Код:

p {
  max-width: 100%;
  width: 400px;
}

Answer 4

Вы можете достичь того, что ищете, просто CSS, без необходимости добавлять дополнительную HTML разметку.

JSfiddle: https://jsfiddle.net/x8qgtpd7/

.text {
  background: #eee;
}
h1{
  padding: 0px 5vw;
  text-align: center;
}
p{
  padding: 0px 15vw;
  max-width: 500px;
  margin: auto;
}

<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>
  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>
  <p>
    One word.
  </p>
</div>