Адаптивные изображения Flexbox не сжимаютсяCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Адаптивные изображения Flexbox не сжимаются

Сообщение Anonymous »

У меня есть родительский элемент с гибким столбцом внутри — это изображение, а в элементе div установлена ​​гибкая строка с еще двумя изображениями внутри. Все изображения сжимаются, как и ожидалось, принимая два внутри этого конкретного div. Я чувствую, что мне не хватает чего-то простого, чтобы решить эту проблему, но все, что я устал, похоже, не работает. Мне надоело гибкое увеличение/сжатие, но это тоже не помогло.
Изображение

Ссылка на CodePen: https://codepen.io/devi8/pen/JjVqagx/57 ... d5da9c4235

Код: Выделить всё

.comp__06 {
max-width: 1720px;
display: flex;
flex-direction: column;
padding: 25px;
margin: 1rem auto;
background: #fff;
border: 1px solid #e5e5e5;
box-sizing: border-box;
}
.comp__06 img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
.comp__06 .header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
}
.comp__06 .header * {
margin: 0 0 1rem;
padding: 0;
}
.comp__06 .header h2 {
font-size: 2rem;
}
.comp__06 .header p {
font-size: 1rem;
}

.comp__06 .content {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 25px;
}

.comp__06 .column {
display: flex;
flex-direction: column;
gap: 25px;
flex: 1 1 auto;
}

.comp__06 .column .row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex: 1 1 auto;
gap: 25px;
border: 1px solid red;
}

.comp__06 .content div:nth-child(1) {
max-width: 630px;
order: 1;
}
.comp__06 .content div:nth-child(2) {
max-width: 630px;
order: 2;
}
.comp__06 .content div:nth-child(3) {
max-width: 360px;
order: 3;
}

Код: Выделить всё


This is a Featured Section Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.


[img]https://place-hold.it/630x630[/img]

[img]https://place-hold.it/630x250[/img]

[img]https://place-hold.it/302x355[/img]
[img]https://place-hold.it/302x355[/img]



[img]https://place-hold.it/360x630[/img]





Подробнее здесь: https://stackoverflow.com/questions/784 ... -shrinking
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»