Как отменить display flex

Как отменить перенос флекс-элементв на следующую строку?

Как отменить перенос флекс-элемента на другую строчку, чтобы он смотрелся на 768px вот так введите сюда описание изображения у меня получается вот, хотя на чуть большем разрешении все нормально, но доходя до 768 переносится Код jsfiddle.net/Le9unvc2/ Сайт tempessj.beget.tech

Отслеживать

задан 4 мая 2021 в 1:46

115 7 7 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Можно добавить грид:

 @media screen and (max-width: 886px) < .item< display: grid; grid-template-columns: repeat(4,auto); >.item .col.desc < grid-column: span 3; >.item .col.price < grid-column: span 4; >>

Отслеживать

ответ дан 4 мая 2021 в 4:47

Pavel Nazarian Pavel Nazarian

4,208 2 2 золотых знака 6 6 серебряных знаков 8 8 бронзовых знаков

Можно вот так. http://jsfiddle.net/BlackStar1991/0wngqfa9/4/ (У вас очень плохо подобраны названия классов . сложно переназначать или расширять )

html, body < font-size: 14px; font-family: 'Roboto'; font-weight: 400; line-height: 1; scroll-behavior: smooth; background-color: #E5E5E5; height: 100%; color: #989691; >h2 < font-size: 24px; font-weight: 700; color: #383736; margin-bottom: 18px !important; line-height: 0.75em; >.wrapper < height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 1280px; padding: 30px 60px; box-sizing: border-box; margin: 0 auto; >.item < position: relative; display: flex; flex-direction: row; justify-content: space-between; border-radius: 8px; padding: 30px; border: 1px solid #ccc; width: 100%; margin-bottom: 30px; background-color: #fff; >.group < width: 100%; display: flex; flex-direction: row; justify-content: space-between; >.close < cursor: pointer; position: absolute; right: 20px; top: 20px; color: #C4C4C4; transition: 0.3s; font-size: 18px; >.close:hover < background-color: #F5F4F2; color: #000; border-radius: 4px; >.close:active < background-color: #E7E4DE; color: #000; border-radius: 4px; >.item .col.img < min-width: 178px; margin-right: 30px; text-align: center; >.col.desc < flex-grow: 1; >.grid < display: grid; grid-template-columns: repeat(3, max-content); grid-gap: 0 55px; >sup < font-size: 10px; >.grid__item < margin-bottom: 18px; >.grid__title < font-size: 12px; font-weight: 400; margin-bottom: 6px; >.grid__des < font-size: 14px; font-weight: 500; color: #383736; >.grid__title, .grid__des < display: block; >.item .col.desc .ach < display: flex; >.item .col.desc .ach div < display: flex; align-items: center; font-size: 12px; font-weight: 500; border-radius: 22px; padding: 10px 20px; >.item .col.desc .ach div i < margin-right: 10px; >.item .col.desc .ach div.viewing < color: #64B851; background-color: #F2FAF0; margin-right: 15px; >.item .col.desc .ach div.accreditation < color: #EB4B51; background-color: #FAF0F0; >.item .col.price < display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid #F0EEEB; padding-left: 30px; min-width: 300px; box-sizing: border-box; >.item .col.price .info .blue < font-weight: 500; color: #2794DB; >.item .col.price .currentprice < color: #383736; display: block; font-size: 24px; font-weight: 700; margin-top: 10px; margin-bottom: 18px; >.item .col.price .info .red < font-weight: 500; color: #EB4B51; >.item .col.price p < line-height: 1.5; >.item .col.price .button < display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; color: #383736; background-color: #FAC62D !important; font-weight: 500; padding: 13px 30px; box-sizing: border-box; width: 100%; border-radius: 6px; transition: 0.3s; text-align: center; >.item .col.price .button:hover < background-color: #F0B505 !important; >.item .col.price .button:active < background-color: #E1AB08 !important; >.item .col.price .button i < margin-right: 15px; transform: rotateY(180deg); >@media screen and (max-width: 1100px) < .wrapper < max-width: 920px; >.grid < grid-template-columns: repeat(2, 1fr); grid-gap: 0; margin-bottom: 3px; >h2, .grid__item < margin-bottom: 13px !important; >.item < margin-bottom: 0px !important; >.grid__item:nth-child(3) < grid-column: 2; grid-row: 2; >.item .col.desc .ach < flex-wrap: wrap; >.item .col.desc .ach div.viewing < margin-right: 0; margin-bottom: 8px; >> @media screen and (max-width: 886px) < .grid < grid-template-columns: repeat(2, max-content); grid-gap: 0 52px; >.item < flex-wrap: wrap; >.item .col.desc .ach < margin-bottom: 18px; flex-wrap: nowrap; white-space: pre-wrap; >.item .col.desc .ach div.viewing < margin-bottom: 0 !important; margin-right: 15px; >.col.price < width: 100%; border-left: none !important; border-top: 1px solid #F0EEEB; padding-top: 18px; >.item .col.price p < margin-bottom: 18px; >>

✖
 
2-к квартира
Этаж3 из 19Высота потолков3,2 мОтделкаПредчистоваяОбщая площадь32,24 м²Жилая площадь22,24 м²Площадь кухни14,24 м² 

Вы были на просмотре
Дом аккредитован другим банком
Ваша цена по брони до 19 сентября3 312 666 РТекущая цена у застройщика
дороже на 324 825 Р
Выбрать для покупки

Как отменить flex для одного элемента?

В общем, мне надо выполнить меню с flex отображением, в версии <768px должно появляться выпадающее меню от Bootstrap (не dropdown, но тут применимо, просто navbar), но оно наследует flex и выпадает не снизу, а сбоку справа. У меня сложная верстка и я как-то сделал через редактор в хроме такие стили, чтобы все эти условия выполнялись и я случайно обновил страницу)

Мой текущий код с Bootstrap:

В большой версии — все выглядит отлично. До открытого меню в маленькой — тоже все ок. Открываю, а список выпадает вправо. Я помню, что шаманил с display block, и удачно, пока не обновил. Из-за этого в своих стайлсах, после bootstrap-а прописал:

.navbar-collapse < display: block; >.collapse:not(.show)

Но что-то где-то потерял, и все перестало работать.

Я уверен, это фиксится просто, но я чето уже долго туплю)))

Вопрос задан более трёх лет назад
7111 просмотров

24 комментария

Средний 24 комментария

flexbox: отменить влияние на один вложенный элемент?

Как правильно отменить действие для одного вложенного элемента?

!important — в этой ситуации не правильно применять, поэтому он не работает?
Подскажите, возможно ли отменить действие flexbox для одного взятого элемента? Как правильно это сделать?

Дополнен 7 лет назад
id=»text» — задавать различный свойства параметры, при этом не затрагивая другие теги
Лучший ответ
Остальные ответы
а что вы хотите с #text сделать ?
Алексей ПантелеевГуру (2908) 7 лет назад

Не обращайте внимание на #text это просто элемент созданный на скорую руку для демонстрации.
Что я не правильно делаю? !important должен работать или нет? Почему не работает? Чем его можно заменить?

Резидент Казахстана Оракул (66943) знать бы что вы хотите, можно написать inline стили, вообще трудно сказать не зная цели

Не знаю, как правильно, но если добавить атрибут position со значением absolute, то можно будет переместить этот блок text в любую точку, если это нужно.

Чего именно нужно добиться? Вытащить блок из флекса не получится, потому что флекс задан его родителю, остальные ему подчиняются. Что нужно получить в итоге?

Как исключить элемент flex?

Как прописывать flex-basis и flex-grow/flex-shrink?
Доброго времени суток? Объясните , пожалуйста, такую вещь, — куда вписывать свойства flex-basis, а.

Как выровнять строки при flex flex-wrap wrap?
Если высота элемента становится больше, то он получается выше чем остальные элементы на той же.

Растянуть второй элемент flex до конца
Добрый день. Есть flex c flex-direction: row; Размер 100px В нём первый элемент 30px, а.

Исключить из псевдокласса первый элемент
#primary-menu > .nav > li > a::before применяет ко всем a псевдо элемент черточку, нужно.