Соотношение ширины для div/столбцов в flex-боксе

У меня есть адаптивный шаблон, созданный с помощью гибкого блока, содержащего div/column изображения и текстовый div/column. Когда ширина обоих столбцов составляет 50%, все работает нормально. Но теперь я хочу, чтобы ширина изображения составляла 60%, а ширина текста - 40%. Моя проблема в том, что я удаляю flex:0 0 auto; ширина: 50%; в разделе .container .columns css и попробуйте задать .columns.image ширину 60%, а .columns.content ширину 40%, это создает проблемы с медиа-запросом.

@import url("https://fonts.googleapis.com/css2?family=Assistant&display=swap");
@import url("https://use.typekit.net/yoj6eqg.css");

* {
  padding: 0;
  margin: 0;
}
body {
  overflow-x: hidden;
}
.container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 5% 15% 5% 15%;
}

.container .columns {
  flex: 0 0 auto;
  width: 50%;
}

.container .columns.image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container .columns.content .content-container {
  padding: 40px 50px;
  background-color: #e6e6e6;
}
.container .columns.content .content-container h1 {
  font-weight: 700;
  font-size: 35px;
  color: #86b530;
  margin-bottom: 20px;
  font-family: "p22-underground", sans-serif;
  font-weight: 600;
  font-style: strong;
}
.container .columns.content .content-container p {
  font-weight: 400;
  font-size: 16px;
  color: #333333;
  margin-bottom: 20px;
  margin-bottom: 15px;
  text-align: justify;
  font-family: "Assistant", sans-serif;
}
@media screen and (max-width: 767px) {
  .container {
    flex-flow: row wrap;
  }
  .container .columns.image {
    display: block;
    order: 1;
    width: 100%;
    height: 250px;
  }
  .container .columns.content {
    display: block;
    order: 2;
    width: 100%;
  }
  .container .columns.content .content-container {
    padding: 20px 35px;
  }
  .container .columns.content .content-container h1 {
    margin-bottom: 5px;
  }
}

<div class = "container">
    <div style = "background-image: url('https://wallpaperset.com/w/full/a/c/7/185665.jpg');" class = "columns image">
    </div>
    <div class = "columns content">
        <div class = "content-container">
            <h1>Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
                laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor
                sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
                aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet,
                consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
                erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Ut wisi enim ad minim veniam, quis nostrud.</p>
        </div>
    </div>
</div>

Я попытался применить различные коэффициенты гибкости и отредактировал медиа-запрос, но безуспешно. Я бы предпочел сохранить гибкий блок вместо перехода на сетку. Если у кого есть решение, буду очень благодарен.

html css flexbox responsive-design

06.02.2023 12:03

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

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

Ответы 1

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

Для равного (50%) распределения пространства столбца внутри родителя .container вы использовали:

.container .columns {
  flex: 0 0 auto;
  width: 50%;
}

Этого CSS было достаточно, так как оба столбца были одинаковой ширины. Однако для неравномерного распределения (60% против 40%) вам нужно будет определить для каждого столбца, сколько родительского пространства он получает:

.container .columns         { flex: 0 0 auto }
.container .columns.image   { width: 60% }
.container .columns.content { width: 40% }

На небольших устройствах (<960px) контейнер .columns.content теперь становится слишком узким, на мой вкус, но это еще одна проблема, которую нужно решить. Может быть, еще один @media с вашим оригинальным 50% дистрибутивом...

Это правильный ответ, и, как ни странно, я пробовал то же самое раньше, но думал, что сделал ошибку, потому что мой текстовый столбец вел себя странно. Оказывается, у меня был лишний { в разделе CSS, что означало, что мой код не работал должным образом. Тем не менее большое спасибо!

— 07.02.2023 08:20

06.02.2023 17:25