Почему дочерние элементы flexbox уменьшаются, хотя я установил для них ширину?
Как вы можете видеть в приведенном ниже фрагменте, у меня есть 3 дочерних элемента для flexbox с установленной шириной 200 пикселей, 150 пикселей и 300 пикселей. Однако, когда я изменяю размер браузера, и элементам не хватает места, они начинают уменьшаться, даже если они имеют жестко запрограммированную ширину, и я не уверен, почему это происходит.
.row {
display: flex;
justify-content: space-between;
width: 100%;
height: 50px;
}
.column1 {
width: 200px;
background-color: red;
}
.column2 {
width: 150px;
background-color: blue;
}
.column3 {
width: 300px;
background-color: green;
}<div class = "row">
<div class = "column1"></div>
<div class = "column2"></div>
<div class = "column3"></div>
</div>
Улучшение производительности загрузки с помощью 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
0
97
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Ваши элементы сжимаются, потому что flexbox пытается уместить всех дочерних элементов в свою ширину. Вы можете изменить это поведение, указав flex-shrink: 0 в элементах div столбца, что сообщает flexbox, что ваши элементы не должны уменьшаться за пределы определенной ширины. Вы также можете узнать больше о flex-shrink на https://css-tricks.com/almanac/properties/f/flex-shrink/.
.row {
display: flex;
justify-content: space-between;
width: 100%;
height: 50px;
}
.row > div {
flex-shrink: 0;
}
.column1 {
width: 200px;
background-color: red;
}
.column2 {
width: 150px;
background-color: blue;
}
.column3 {
width: 300px;
background-color: green;
}<div class = "row">
<div class = "column1"></div>
<div class = "column2"></div>
<div class = "column3"></div>
</div>Другие вопросы по теме
Почему он называется «border-width», когда устанавливает высоту линии границы, а не размер по горизонтали?
Как анимировать положение div с помощью CSS один за другим?
Tailwind css, как установить цвет шрифта по умолчанию?
Как исправить плавную навигацию, исправленную в Jquery?
Как я могу проверить, проверен ли элемент внутри ячейки?
CSS-обрезанное изображение внутри статического контейнера, расположенное абсолютно по отношению к дедушке и бабушке
Карусель Bootstrap, карточка с текстом сверху
Как выровнять текст после использования свойства преобразования
Мигает фоновое изображение в css
Как указать браузеру сжимать ячейку таблицы в нужном месте, когда ширина мала
Похожие вопросы
Почему он называется «border-width», когда устанавливает высоту линии границы, а не размер по горизонтали?
Как отображать теги <br> на самом деле как разрывы строк в Yii2 mpdf
Проблема с очисткой рейтинга etoil с помощью BeautifulSoup
Как исправить плавную навигацию, исправленную в Jquery?
Как я могу проверить, проверен ли элемент внутри ячейки?
Объявление 'ref' в чистой реакции
Как запретить тегу <a> перенаправлять пользователя, сохраняя при этом атрибут href?
CSS-обрезанное изображение внутри статического контейнера, расположенное абсолютно по отношению к дедушке и бабушке
Карусель Bootstrap, карточка с текстом сверху
Как добавить внешний скрипт .js в мой index.html