How to reset 'display' property for flex-item
I’m trying to convert old layout based on tables and JS to the new Flexbox with backward compatibility by keeping the tables for old browsers (specifically IE8, IE9 and Opera 10+).
The problem is that there is no display:flex-item to override the old style of display:table-cell .
I’ve tried various definitions like display:inherit , display:initial but none is able to reset the display definition to work correctly as flex-item.
Whatever I set in display for the .details it does not work as flex-item and does not grow to fill the remaining space.
Any idea how to override this without using JS to detect browser version and switch the styles?
I’ve tried googling for solution but most of the results are just general articles about Flexbox; only similar is this test which simply does not solve the backward compatility.
UPDATE 1: This is a JSFiddle demo of a pure Flexbox and Flexbox combined with table layout. If you resize the result window, the pure layout shrinks differently than the bottom one that combine table and Flexbox. Note: in Chrome this works correctly, try it in Firefox, IE, Safari, etc.
UPDATE 2: Safari works correctly with prefixed definitions. updated JSFiddle demo
3 Answers 3
As Danield has mentioned, all children of a flex container (designated by display: flex or display: inline-flex ) are automatically made flex items. There is no display property for a flex item; instead, you set it to some other value depending on how you want the children of the flex item to be laid out. If browsers are recognizing display: flex-item , then they probably have some weird non-standard implementation of «flexbox», because that value has never existed in any incarnation of the Flexbox spec (and I have no idea what exactly it would correspond to if it did).
The initial value of display is inline , so display: initial is equivalent to display: inline . See this answer. What you’re trying to do is reset the elements to whatever their default display is as given by browsers. You will need to know this value in advance; for div elements it’s display: block .
Unfortunately, this will override the existing table-cell declaration in all browsers, for obvious reasons. In that case, you might as well just stick with the table layout if it already works for you, if you need to support browsers that don’t support flexbox.
Как отменить flex для одного элемента?
В общем, мне надо выполнить меню с flex отображением, в версии <768px должно появляться выпадающее меню от Bootstrap (не dropdown, но тут применимо, просто navbar), но оно наследует flex и выпадает не снизу, а сбоку справа. У меня сложная верстка и я как-то сделал через редактор в хроме такие стили, чтобы все эти условия выполнялись и я случайно обновил страницу)
Мой текущий код с Bootstrap:
В большой версии — все выглядит отлично. До открытого меню в маленькой — тоже все ок. Открываю, а список выпадает вправо. Я помню, что шаманил с display block, и удачно, пока не обновил. Из-за этого в своих стайлсах, после bootstrap-а прописал:
Как сбросить свойство «display» для flex-item
Я пытаюсь преобразовать старый макет на основе таблиц и JS в новый Flexbox с обратной совместимостью, сохраняя таблицы для старых браузеров (в частности, IE8, IE9 и Opera 10+).
проблема в том, что нет display:flex-item чтобы переопределить старый стиль display:table-cell .
Я пробовал различные определения, как display:inherit , display:initial но никто не сможет сбросить дисплей для правильной работы в качестве гибкого элемента.
все, что я установил в дисплее для .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-shrink, чтобы предотвратить сжатие больше, чем его содержимое
CSS. Как корректно отменить действие display:flex для ссылок?
Нужно что бы заголовок не переносился на новую строку, а скрывался если длиннее.
Попробуйте задать фиксированную высоту и white-space: nowrap, что запретит переносить текст на вторую строку:
Из цитаты на w3schools.com:
nowrap — Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br /> tag is encounteredBlockquote
ps: если вам нужно скрыть текста справа, то задайте ему также фиксированную ширину и блочный тип отображения и скройте то, что выходит за рамки.. я предполагаю что такой вариант подойдет:
Как в технологии Flexbox в CSS3 задать, в флекс элементах значение, чтобы в зависимости от текста менялись ракми этого эл
Как в технологии Flexbox в CSS3 задать, в флекс элементах значение, чтобы в зависимости от текста менялись ракми этого элемента?
Вообщем есть флекс контейнер, и там внутри флекс элементы, и вот хочеться чтобы при изменении текста менялись рамки этого элемента, и текст не выходил за рамки элемента
какое свойство отвечает, и его нужно будет указывать в флекс контейнере, или в каждом флекс элементе ? Guest 7
В зависимости от размера текста что бы менялась рамка? я верно понял ?
Как установить гиперссылку в HTML?
Для гиперссылок необходимо использовать тег <a>
Обычно ссылка выглядит следующим образом:
Вместо https://example.com необходимо записать ссылку, на которую хотите установить переадресацию.
Если необходимо открыть ссылку в следующей вкладке, то необходимо дописать аттрибут target=»_blank».