Как сделать мой макет заголовка таким?

Мне трудно сделать так, чтобы мой заголовок выглядел так, где левый и правый принимают минимально возможную ширину: Как сделать мой макет заголовка таким? Что у меня есть на данный момент:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

header div {
  min-height: 7rem;
  display: flex;
  align-items: center;
  padding: 2rem 5rem;
  background-color: blue;
}

.center {
  background-color: yellow;
}

.right {
  background-color: red;
}

<header>
  <div class = "left">Left</div>
  <div class = "center">Center</div>
  <div class = "right">Right</div>
</header>

html css css-grid

22.03.2022 19:19

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

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

Ответы 3

Используйте `flex-grow: 1`.

Этого легко добиться с помощью display: flex и flex-grow: 1.

Узнайте больше о flexbox:

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
}

header div {
  min-height: 7rem;
  align-items: center;
  padding: 2rem 3rem;
  background-color: blue;
}

.center {
  background-color: yellow;
  flex-grow: 1;
}

.right {
  background-color: red;
}

<header>
  <div class = "left">Left</div>
  <div class = "center">Center</div>
  <div class = "right">Right</div>
</header>

22.03.2022 19:23

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

Использование 1fr 1fr 1fr для макета сетки означает, что каждый из элементов имеет одинаковую ширину — они разделяют доступную ширину между собой.

Если вы хотите, чтобы левая и правая стороны занимали минимальную ширину, необходимую для их размещения, установите для них значение auto, а для среднего — 1fr. Затем средний будет занимать всю оставшуюся ширину.

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

header div {
  min-height: 7rem;
  display: flex;
  align-items: center;
  padding: 2rem 5rem;
  background-color: blue;
}

.center {
  background-color: yellow;
}

.right {
  background-color: red;
}

<header>
  <div class = "left">Left</div>
  <div class = "center">Center</div>
  <div class = "right">Right</div>
</header>

Узнайте больше на:

22.03.2022 19:28

1fr 1fr 1fr создают проблему, задавая одинаковую ширину поэтому я использовал auto 1fr auto с помощью set auto он может изменить ширину левого и правого на основе относительно родителя. или вы можете установить значения для левого и правого, например: 0.2fr 0.2fr

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: grid;
  grid-template-columns: auto 1fr auto;
}

header div {
  min-height: 7rem;
  display: flex;
  align-items: center;
  padding: 2rem 5rem;
  background-color: blue;
}

.center {
  background-color: yellow;
}

.right {
  background-color: red;
}

<header>
  <div class = "left">Left</div>
  <div class = "center">Center</div>
  <div class = "right">Right</div>
</header>

22.03.2022 20:06

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

Порядок специфичности CSS

Применение css к строкам

Как настроить таргетинг на все элементы с определенным классом в JavaScript

Почему моя кнопка закрытия CSS имеет два символа X?

Есть ли способ превратить мой flex 50/50 Split View CSS в 70/30?

Как я могу заставить ссылки сохранять положение относительно фонового изображения при изменении размера окна?

Буквы не будут трансформироваться без свойства `inline-block`

Как увеличить высоту элемента при добавлении дочерних элементов?

Пробел между границами сверху и снизу

Добавляйте пробелы между каждой буквой слова HTML и CSS

Как сделать мой макет заголовка таким?

Ответы 3

Используйте flex-grow: 1.

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

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

Используйте `flex-grow: 1`.