Как отменить 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,228 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 влияния?

Имеется див, которому присвоен display: flex;
В нем соответственно колонки. Можно ли из потока flex (не знаю как правильно сказать или из-под влияния flex) убрать один из внутренних селекторов внутри этого дива, т.е. чтобы остальные колонки не видели его? А именно мне нужно убрать button элемент.

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

1 комментарий

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

flex-wrap

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020 .

Свойство CSS flex-wrap задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.

Интерактивный пример

Начальное значение	nowrap
Применяется к	flex-контейнеры
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Подробнее о свойствах и дополнительную информацию смотрите Основные понятия Flexbox.

Синтаксис

flex-wrap: nowrap; /* Default value */ flex-wrap: wrap; flex-wrap: wrap-reverse; /* Глобальные значения */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: revert; flex-wrap: revert-layer; flex-wrap: unset;

Свойство flex-wrap может содержать одно из следующих ниже значений.

Значения

Допускаются следующие значения:

Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction .

Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости от значения flex-direction и свойство cross-end противоположно cross-start.

Ведёт себя так же, как и wrap , но cross-start и cross-end инвертированы.

Формальный синтаксис

flex-wrap =
nowrap | (en-US)
wrap | (en-US)
wrap-reverse

Примеры

HTML

h4>This is an example for flex-wrap:wraph4> div class="content"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:nowraph4> div class="content1"> div class="red">1div> div class="green">2div> div class="blue">3div> div> h4>This is an example for flex-wrap:wrap-reverseh4> div class="content2"> div class="red">1div> div class="green">2div> div class="blue">3div> div>

CSS

/* Common Styles */ .content, .content1, .content2  color: #fff; font: 100 24px/100px sans-serif; height: 150px; text-align: center; > .content div, .content1 div, .content2 div  height: 50%; width: 50%; > .red  background: orangered; > .green  background: yellowgreen; > .blue  background: steelblue; > /* Flexbox Styles */ .content  display: flex; flex-wrap: wrap; > .content1  display: flex; flex-wrap: nowrap; > .content2  display: flex; flex-wrap: wrap-reverse; >

Результат

Спецификации

Specification
CSS Flexible Box Layout Module Level 1 # flex-wrap-property

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

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

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

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

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

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

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

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