CSS-дисплей гибкого пространства между не работает

Для начала я должен признать, что я довольно любитель флексбоксов и CSS. Так что извините за наивные ошибки.

У меня есть следующий код:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background: #aaa;
  color: #333;
  /* I'll give you this one for free lol */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
  display: flex;
  padding: 16px;
  gap: 16px;
}

.icon-item {
  flex-shrink: 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.header-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header {
  font-weight: bold;
}

.icon {
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  padding: 0;
}

button {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
}

button.continue {
  background: royalblue;
  border: 1px solid royalblue;
  color: white;
}

button.cancel {
  background: white;
  border: 1px solid #ddd;
  color: royalblue;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href = "style.css">
  <title>Modal</title>
</head>

<body>
  <div class = "modal">
    <div class = "icon-item">
      <div class = "icon">!</div>
    </div>
    <div class = "info-item">
      <div class = "header-item">
        <div class = "header">Are you sure you want to do that?</div>
        <button class = "close-button">✖</button>
      </div>
      <div class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
      <div>
        <button class = "continue">Continue</button>
        <button class = "cancel">Cancel</button>
      </div>
    </div>
  </div>
</body>

</html>

В моем классе элемента заголовка я пытаюсь достичь желаемого результата, используя flexbox и, в частности, свойство justify-content: space-between. Но не получается...

Я имею в виду, что значение space-between, вероятно, здесь говорит громко. В контейнере нет места для перестановки предметов, поэтому я думаю, что проблема здесь, это мое предположение. Если да, то я хотел бы спросить, что я могу сделать, чтобы это исправить разумным способом, а не только жесткое кодирование пикселей и все такое... Возможно ли это? чтобы класс .header-item заполнил всю ширину родительского элемента, чтобы у его дочерних элементов было место для перестановки?

Заранее спасибо!

html css flexbox

05.04.2024 14:55

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

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

Добавив width:100%; к .header-item и установив margin-left: auto; к .close-button, можно заставить close-button выровняться в конце строки.

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background: #aaa;
  color: #333;
  /* I'll give you this one for free lol */
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0,0,0,.2);
  display: flex;
  padding: 16px;
  gap: 16px;
}

.icon-item {
  flex-shrink: 0;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.header-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width:100%;
}

.header {
  font-weight: bold;
}

.icon {
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  padding: 0;
  margin-left: auto;
}

button {
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
}

button.continue {
  background: royalblue;
  border: 1px solid royalblue;
  color: white;
}

button.cancel {
  background: white;
  border: 1px solid #ddd;
  color: royalblue;
}

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "style.css">
    <title>Modal</title>
  </head>
  <body>
    <div class = "modal">
      <div class = "icon-item">
        <div class = "icon">!</div>
      </div>
      <div class = "info-item">
        <div class = "header-item">
          <div class = "header">Are you sure you want to do that?</div>
          <button class = "close-button">✖</button>
        </div>
        <div class = "text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
        <div>
          <button class = "continue">Continue</button>
          <button class = "cancel">Cancel</button>
        </div>
      </div>
    </div>
  </body>
</html>

05.04.2024 15:02

Вы были очень близки, все решает одна строчка:

.header-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Forcing flex to use full width */
}

Без этого ваша гибкая структура просто пытается уместить все элементы в минимально возможное пространство.

05.04.2024 15:07

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

Как отформатировать HTML-текст, чтобы он охватывал ключевые слова

HTML/CSS Не показывает видеофон для мобильных устройств

Как разместить навигационное меню в заголовке под фоновым изображением?

Анимация скольжения текста в CSS

Невозможно переместить SVG в центр экрана

Выровняйте фотографию по элементу div и сохраните отзывчивость

Пытаюсь найти и нажать элемент кнопки, но Selenium Webdriver вызывает исключение NoSuchElementException

Строка, подобная div, внутри гибкой среды с повернутым заголовком в начале

Создание собственного всплывающего окна, которое меняет высоту в зависимости от содержимого и при необходимости добавляет полосу прокрутки

Как сделать положение модального окна статическим при масштабировании или изменении размера экрана

CSS-дисплей гибкого пространства между не работает

Ответы 2

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

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