Как сбросить свойство «display» для flex-item
Я пытаюсь преобразовать старый макет на основе таблиц и JS в новый Flexbox с обратной совместимостью, сохраняя таблицы для старых браузеров (в частности, IE8, IE9 и Opera 10+).
проблема в том, что нет display:flex-item чтобы переопределить старый стиль display:table-cell .
Я пробовал различные определения, как display:inherit , display:initial но никто не сможет сбросить дисплей для правильной работы в качестве гибкого элемента.
/* CSS Table Layout */ .layout < display: table; width: 100%; >.layout > .picture < display: table-cell; width: 30%; >.layout > .details < display: table-cell; width: auto; >/* CSS Flexbox - ignored by browsers that does not support it */ /* just an example - should use all versions for best compatibility */ .layout < display: flex; >.layout > .picture < display: . ; flex: 0 1 30%; >.layout > .detailsusername, email, etc.все, что я установил в дисплее для .details он не работает как flex-item и не растут чтобы заполнить оставшееся пространство.
любая идея, как переопределить это без использования JS для обнаружения версии браузера и переключения стилей?
Я пробовал googling для решения, но большинство результатов — это только общие статьи о Flexbox; только подобное этот тест что просто не решает обратную совместимость.
обновление 1: Это демо JSFiddle чисто Flexbox и Flexbox совмещенных с планом таблицы. При изменении размера окна результатов чистый макет сжимается иначе, чем нижний, объединяющий таблицу и Flexbox. Примечание: В Chrome это работает правильно, попробуйте в Firefox, IE, Safari и т. д.
обновление 2: Safari работает правильно с префиксными определениями. обновлено jsfiddle demo
3 ответов
как упоминал Данилд, все дети контейнера flex (обозначенного display: flex или display: inline-flex ) автоматически сделаны детали гибкого трубопровода. Нет display свойство для элемента flex; вместо этого вы устанавливаете его в какое-то другое значение в зависимости от того, как вы хотите детей элемента flex быть выложенным. Если браузеры распознают display: flex-item , тогда у них, вероятно, есть какая-то странная нестандартная реализация «flexbox», потому что это значение никогда не существовало ни в одном воплощении Спецификация Flexbox (и я понятия не имею, чему именно это соответствовало бы, если бы это было так).
начальное значение display и inline , так что display: initial эквивалентно display: inline . См.ответ. То, что вы пытаетесь сделать, это сбросить элементы на все, что по умолчанию display , как указано браузерами. Вам нужно будет знать это значение заранее; для div элементов display: block .
к сожалению, это отменить существующий table-cell заявление в все браузеры, по понятным причинам. В этом случае вы можете просто придерживаться макета таблицы, если он уже работает для вас, если вам нужно поддерживать браузеры, которые не поддерживают flexbox.
нет display:flex-item потому что как только вы установите display:flex на элементе контейнера дети автоматически сгибают элементы.
здесь демо показать, что display:table-cell на детей не влияет функциональность свойств flex на детей
Edit: для Firefox и IE, если вы добавите правило display:flex после display:table-cell правило тогда display:table-cell на детях не влияет на функциональность свойства flex для детей
/* flex layout with display:table falllback */ .layout < display: table; /* falllback */ width: 100%; /* falllback */ display: flex; >.layout > .picture < display: table-cell; /* falllback */ width: 30%; /* falllback */ display:flex; /* to make FF and IE happy */ flex: 0 1 30%; background: tomato; >.layout > .details < display: table-cell; /* falllback */ width: auto; /* falllback */ display:flex; /* to make FF and IE happy */ flex: 1 1 auto; background: aqua; >Как убрать display flex в media query
У меня есть абзац и изображение рядом. Для этого я использовал свойство display:flex . Но в небольших устройствах мне это свойство не нужно. Может ли кто-нибудь сказать мне, как я могу удалить это свойство?
Я хотел бы отметить, что display: flex; добавляется в контейнер элементов, которые должны храниться рядом (или в стопке), а не сами элементы. Подумайте о том, чтобы обернуть «p» и «img» в div, в котором установлено display: flex; . И вам действительно не нужно добавлять float к любому элементу. Flexbox сделает это за вас.
2 ответа
Чтобы добиться этого, добавьте следующее:
@media only scree and (min-width: 600px) < p, img < display: block; >>Вы должны добавить гибкий контейнер, который содержит элементы. И я рекомендую оставить display flex и использовать flex-direction: column при выполнении медиа-запроса.
.flex < width: 100vw; display: flex; align-items: center; >img < padding: 0; margin: 0; background-color: red; width: 45%; >p < text-align: justify; padding: 0; margin: 0; font-size: 20px; >@media only screen and (max-width: 600px) < .flex < flex-direction: column; >>Hello
Большое спасибо, сэр. Вы решили мою очень большую проблему. Я использовал дополнительный гибкий div, и теперь все работает хорошо. Спасибо.
Вы должны использовать медиа-запросы для таргетинга на определенные устройства. Общая схема медиа-запроса выглядит следующим образом:
@media not|only mediatype and (expressions) < /* your css rules */ >Вы можете исключить экраны меньше определенной ширины из правил CSS, установив для них значения по умолчанию,
p, img < display: flex; >img < float: left; width: 45%; padding: 0; margin: 0; >p < float: right; text-align: justify; width: 50%; padding: 0; margin: 0; font-size: 20px; >@media only screen and (max-width: 768px) < p < display: block; >img < display: inline-block; >>Или вы можете написать свои правила так, чтобы они применялись только к экранам больше определенной ширины:
@media only screen and (min-width: 768px) < p, img < display: flex; >> img < float: left; width: 45%; padding: 0; margin: 0; >pСуществует также хороший ресурс о различных способах установки для свойства отображения значений по умолчанию, который можно найти здесь: Сбросить свойство отображения CSS до значения по умолчанию
inline-block – это режим отображения изображений по умолчанию в браузере. Вы не можете обобщить селектор, чтобы установить отображение как блок для обоих тегов.
Как заменить добавляемый display:block через javascript на display:flex?
Добрый день!
Прошу не ругаться, что можно было гуглить и т.п.
Есть слайдер, который при нажатии на кнопку выводит по очереди UL списки. Спискам задан display:flex, что и хотелось в итоге сохранить структуру сетки. Так вот, при нажатии на добавить список, в UL вставляется скриптом display:block, что в итоге рушить всю конструкцию. Как подправить код, чтобы flex вместо block вставлялся?
Можно в этом коде сделать кнопку закрыть предыдущее поле и стереть с него данные при закрытии, и чтобы кнопка «Добавить» не появлялась когда все поля заполнены.
Что в итоге получаю: из-за block сетка поползла..
Сам код:
.input_remove .ingredient-b < display: flex; justify-content: space-between; position: relative; list-style: none; margin: 0; padding: 0;>.ingredient-b li// СПОЙЛЕР С БЛОКАМИ ИНГРЕДИЕНТОВ $('.btn-next_block ').click(function() < // показать первый скрытый по порядку $('.ingredient-b:hidden').eq(0).show(); // скрыть кнопку при отсутствии скрытых элементов $('.ingredient-b:hidden').length); // Удаляем класс у родителя если (input - value"") заполнен и не скрываем спойлер для показа всех ингредиентов при редактировании $('.input-ingr input').each(function() < $(this).closest('.hiden_box').toggleClass('input_remove', !this.value); >);
