|
|
|
|
 Far |
| WinNavigator |
| Frigate |
| Norton
Commander |
| WinNC |
| Dos
Navigator |
| Servant
Salamander |
| Turbo
Browser |
|
|
| Winamp,
Skins, Plugins |
| Необходимые
Утилиты |
| Текстовые
редакторы |
| Юмор |
|
|
|
File managers and best utilites |
flex-wrap. Css display flex поддержка браузерами
flex-grow | CSS | WebReference
Содержание
Определяет, сколько пространства может занимать флекс внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.
Краткая информация
| 0 |
| Нет |
| К флекс-элементам |
| Да |
Обозначения
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Принимаются целые числа. Отрицательные значения игнорируются.
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-grow</title> <style> form { width: 400px; margin: auto; } p { display: flex; } label { margin-right: 10px; } input, select { flex-grow: 1; } </style> </head> <body> <form action="handler.php"> <p> <label>Имя:</label> <input name="name"> </p> <p> <label>Какая у вас операционная система?:</label> <select name="os"> <option value="1">Windows</option> <option value="2">Linux</option> <option value="3">Mac OS</option> </select> </p> <p><button>Отправить</button></p> </form> </body> </html>
Ширина полей формы
Примечание
Safari до версии 9 поддерживает свойство -webkit-flex-grow.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор: Влад Мержевич
Последнее изменение: 17.02.2018
Редакторы: Влад Мержевич
webref.ru
display - CSS: Cascading Style Sheets
The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline, including SVG elements.
In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off. The document is rendered as though the element doesn't exist in the document tree.
/* <display-outside> values */ display: block; display: inline; display: run-in; /* <display-inside> values */ display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby; display: subgrid; /* <display-outside> plus <display-inside> values */ display: block flow; display: inline table; display: flex run-in; /* <display-listitem> values */ display: list-item; display: list-item block; display: list-item inline; display: list-item flow; display: list-item flow-root; display: list-item block flow; display: list-item block flow-root; display: flow list-item block; /* <display-internal> values */ display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row; display: table-cell; display: table-column-group; display: table-column; display: table-caption; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; /* <display-box> values */ display: contents; display: none; /* <display-legacy> values */ display: inline-block; display: inline-table; display: inline-flex; display: inline-grid; /* Global values */ display: inherit; display: initial; display: unset;| inline |
| all elements |
| no |
| all |
| as the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified. |
| discrete |
| the unique non-ambiguous order defined by the formal grammar |
Syntax
The display property is specified using keyword values. Keyword values are grouped into six categories:
Currently it's best to specify display using a single keyword; although the latest specifications allow you to combine some keywords, this is not yet well supported by browsers.
Values
<display-outside> These keywords specify the element’s outer display type, which is essentially its role in flow layout. They are defined as follows:| block | The element generates a block element box. |
| inline | The element generates one or more inline element boxes. |
| run-in | The element generates a run-in box. Run-in elements act like inlines or blocks, depending on the surrounding elements. That is:
|
| flow | The element lays out its contents using flow layout (block-and-inline layout). If its outer display type is inline or run-in, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box. Depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context for its contents or integrates its contents into its parent formatting context. |
| flow-root | The element generates a block element box that establishes a new block formatting context. |
| table | These elements behave like <table> HTML elements. It defines a block-level box. |
| flex | The element behaves like a block element and lays out its content according to the flexbox model. |
| grid | The element behaves like a block element and lays out its content according to the grid model. |
| subgrid | If the parent element has display:grid, the element itself and its content are laid out according to the grid model. |
| ruby | The element behaves like an inline element and lays out its content according to the ruby formatting model. It behaves like the corresponding <ruby> HTML elements. |
The element generates a block box for the content and a separate list-item inline box.
If no <display-inside> value is specified, the principal box’s inner display type defaults to flow. If no <display-outside> value is specified, the principal box’s outer display type defaults to block.
Some layout models, such as table and ruby, have a complex internal structure, with several different roles that their children and descendants can fill. This section defines those "internal" display values, which only have meaning within that particular layout mode.
Unless otherwise specified, both the inner display type and the outer display type of elements using these display values are set to the given keyword.
| table-row-group | These elements behave like <tbody> HTML elements |
| table-header-group | These elements behave like <thead> HTML elements. |
| table-footer-group | These elements behave like <tfoot> HTML elements. |
| table-row | These elements behave like <tr> HTML elements. |
| table-cell | These elements behave like <td> HTML elements. |
| table-column-group | These elements behave like <colgroup> HTML elements. |
| table-column | These elements behave like <col> HTML elements. |
| table-caption | These elements behave like <caption> HTML elements. |
| ruby-base | These elements behave like <rb> elements. |
| ruby-text | These elements behave like <rt> elements. |
| ruby-base-container | These elements behave like <rbc> elements generated as anonymous boxes. |
| ruby-text-container | These elements behave like <rtc> elements. |
| contents | These elements don't produce a specific box by themselves. They are replaced by their pseudo-box and their child boxes. Please note that CSS Display Level 3 spec defines how the contents value should affect "unusual elements" — elements that aren’t rendered purely by CSS box concepts such as replaced elements. See Appendix B: Effects of display: contents on Unusual Elements for more details. |
| none | Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off. To have an element take up the space that it would normally take, but without actually rendering anything, use the visibility property instead. |
| inline-block | The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would) It is equivalent to inline flow-root. |
| inline-table | The inline-table value does not have a direct mapping in HTML. It behaves like a <table> HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context. It is equivalent to inline table. |
| inline-flex | The element behaves like an inline element and lays out its content according to the flexbox model. It is equivalent to inline flex. |
| inline-grid | The element behaves like an inline element and lays out its content according to the grid model. |
Formal syntax
[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where <display-outside> = block | inline | run-in<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby<display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]?<display-internal> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container<display-box> = contents | none<display-legacy> = inline-block | inline-list-item | inline-table | inline-flex | inline-grid
Examples
Hide element
HTML
<p>Visible text</p> <p>Invisible text</p>CSS
p.secret { display: none; }Result
Accessibility concerns
display: none;
Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
If you want to visually hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.
Tables
Changing the display value of a table element to block, grid, or flex will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology.
Specifications
| CSS Display Module Level 3The definition of 'display' in that specification. | Working Draft | Added run-in, flow, flow-root, contents, and multi-keyword values. |
| CSS Ruby Layout Module Level 1The definition of 'display' in that specification. | Working Draft | Added ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container. |
| CSS Grid LayoutThe definition of 'display' in that specification. | Candidate Recommendation | Added the grid box model values. |
| CSS Flexible Box Layout ModuleThe definition of 'display' in that specification. | Candidate Recommendation | Added the flexible box model values. |
| CSS Level 2 (Revision 1)The definition of 'display' in that specification. | Recommendation | Added the table model values and inline-block. |
| CSS Level 1The definition of 'display' in that specification. | Recommendation | Initial definition. Basic values: none, block, inline, and list-item. |
Browser compatibility
| Basic support | 1 | 12 | 1 | 4 | 7 | 1 |
| list-item | 1 | 12 | 1 | 6 | 7 | 1 |
| inline-block | 1 | 12 | 1 | 61 | 7 | 1 |
| inline-table | 1 | 12 | 3 | 8 | 7 | 1 |
| table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group | 1 | 12 | 1 | 8 | 7 | 1 |
| flex | 29 21 -webkit- | 12 | 202 18 —?3 | 11 84 | Yes | 9 6.1 -webkit- |
| inline-flex | 21 -webkit- | 12 | 202 18 —?3 | 11 85 | Yes | 6.1 -webkit- |
| grid | 57 | 16 12 -ms- | 52 | 10 -ms- | 44 | ? |
| inline-grid | 57 | 12 -ms- | 52 | 10 -ms- | 44 | ? |
| subgrid | ? | No | ? | No | ? | ? |
| ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container | ? | 12 | 346 | ? | ? | ? |
| run-in | 1 — 327 | No | No | 8 | 7 — 15 | 1 — 88 |
| flow-root | 58 | ? | 53 | ? | 45 | ? |
| contents | 65 58 — 659 | No | 37 Yes — 5310 | No | 52 | 11.1 |
| Basic support | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| list-item | ? | ? | ? | ? | ? | ? | ? |
| inline-block | ? | ? | ? | ? | ? | ? | ? |
| inline-table | ? | ? | ? | ? | ? | ? | ? |
| table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, and table-row-group | ? | ? | ? | ? | ? | ? | ? |
| flex | ? | ? | ? | ? | ? | ? | ? |
| inline-flex | ? | ? | ? | ? | ? | ? | ? |
| grid | 57 | 57 | ? | 52 | 44 | ? | 7.0 |
| inline-grid | 57 | 57 | ? | 52 | 44 | ? | 7.0 |
| subgrid | ? | ? | ? | ? | ? | ? | ? |
| ruby, ruby-base, ruby-base-container, ruby-text, and ruby-text-container | ? | ? | ? | ? | ? | ? | ? |
| run-in | ? | ? | ? | ? | ? | ? | ? |
| flow-root | 58 | 58 | ? | ? | 45 | ? | 7.0 |
| contents | 65 | 65 | ? | 57 | 52 | 11.1 | No |
1. Until Internet Explorer 8, inline-block is only for natural inline elements.
2. Firefox 28 added multi-line flexbox support.
3. From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
4. Supported as -ms-flexbox.
5. Supported as -ms-inline-flexbox.
6. From version 34: this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
7. Before Chrome 4, run-in was not supported before inline elements.
8. Before Safari 5, run-in was not supported before inline elements.
9. From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
10. Until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
| DesktopMobile | ||||||||||||
| ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet | ||||||||||||
| Full support 1 | Full support 12 | Full support 1 | Full support 4 | Full support 7 | Full support 1 | Full support Yes | Full support Yes | Full support Yes | Full support Yes | Full support Yes | Full support Yes | Full support Yes |
| Full support 1 | Full support 12 | Full support 1 | Full support 6 | Full support 7 | Full support 1 | ? | ? | ? | ? | ? | ? | ? |
| Full support 1 | Full support 12 | Full support 1 | Full support 6 Full support 6Notes Until Internet Explorer 8, inline-block is only for natural inline elements. | Full support 7 | Full support 1 | ? | ? | ? | ? | ? | ? | ? |
| Full support 1 | Full support 12 | Full support 3 | Full support 8 | Full support 7 | Full support 1 | ? | ? | ? | ? | ? | ? | ? |
| Full support 1 | Full support 12 | Full support 1 | Full support 8 | Full support 7 | Full support 1 | ? | ? | ? | ? | ? | ? | ? |
| Full support 29 Full support 29 Full support 21Prefixed Requires the vendor prefix: -webkit- | Full support 12 | Full support 20 Full support 20Notes Firefox 28 added multi-line flexbox support. No support 18 — ?Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. | Full support 11 Full support 11 Full support 8Alternate Name Uses the non-standard name: -ms-flexbox | Full support Yes | Full support 9 Full support 9 Full support 6.1Prefixed Requires the vendor prefix: -webkit- | ? | ? | ? | ? | ? | ? | ? |
| Full support 21 Full support 21Prefixed Requires the vendor prefix: -webkit- | Full support 12 | Full support 20 Full support 20Notes Firefox 28 added multi-line flexbox support. No support 18 — ?Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. | Full support 11 Full support 11 Full support 8Alternate Name Uses the non-standard name: -ms-inline-flexbox | Full support Yes | Full support 6.1 Full support 6.1Prefixed Requires the vendor prefix: -webkit- | ? | ? | ? | ? | ? | ? | ? |
| Full support 57 | Full support 16 Full support 16 Full support 12Prefixed Requires the vendor prefix: -ms- | Full support 52 | Full support 10 Full support 10Prefixed Requires the vendor prefix: -ms- | Full support 44 | ? | Full support 57 | Full support 57 | ? | Full support 52 | Full support 44 | ? | Full support 7.0 |
| Full support 57 | Full support 12 Full support 12Prefixed Requires the vendor prefix: -ms- | Full support 52 | Full support 10 Full support 10Prefixed Requires the vendor prefix: -ms- | Full support 44 | ? | Full support 57 | Full support 57 | ? | Full support 52 | Full support 44 | ? | Full support 7.0 |
| ? | No support No | ? | No support No | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| ? | Full support 12 | Full support 34 Full support 34Disabled From version 34: this feature is behind the layout.css.ruby.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. | ? | ? | ? | ? | ? | ? | ? | ? | ? | ? |
| No support 1 — 32 No support 1 — 32Notes Before Chrome 4, run-in was not supported before inline elements. | No support No | No support No | Full support 8 | No support 7 — 15 | No support 1 — 8 No support 1 — 8Notes Before Safari 5, run-in was not supported before inline elements. | ? | ? | ? | ? | ? | ? | ? |
| Full support 58 | ? | Full support 53 | ? | Full support 45 | ? | Full support 58 | Full support 58 | ? | ? | Full support 45 | ? | Full support 7.0 |
| Full support 65 Full support 65 No support 58 — 65Disabled From version 58 until version 65 (exclusive): this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags. | No support No | Full support 37 Full support 37 No support ? — 53Disabled Until version 53 (exclusive): this feature is behind the layout.css.display-contents.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. | No support No | Full support 52 | Full support 11.1 | Full support 65 | Full support 65 | ? | Full support 57 | Full support 52 | Full support 11.1 | No support No |
Legend
Full support Full support No support No support Compatibility unknown Compatibility unknownExperimental. Expect behavior to change in the future.Experimental. Expect behavior to change in the future.See implementation notes.See implementation notes.User must explicitly enable this feature.User must explicitly enable this feature.Uses a non-standard name.Uses a non-standard name.Requires a vendor prefix or different name for use.Requires a vendor prefix or different name for use.See also
developer.mozilla.org
flex-wrap | CSS | WebReference
Содержание
Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.
Краткая информация
| nowrap |
| Нет |
| К флекс-контейнеру |
| Нет |
Синтаксис ?
flex-wrap: nowrap | wrap | wrap-reverseОбозначения
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
nowrapФлексы выстраиваются в одну линию.wrapФлексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.wrap-reverseФлексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>flex-wrap</title> <style> .flex-container { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; } .flex-item { padding: 20px; background: #f0f0f0; border-radius: 5px; margin: 1rem; text-align: center; } </style> </head> <body> <ul> <li><img src="image/aquaria1.jpg" alt=""></li> <li><img src="image/aquaria2.jpg" alt=""></li> <li><img src="image/aquaria3.jpg" alt=""></li> </ul> </body> </html>Примечание
Safari до версии 9 поддерживает свойство -webkit-flex-wrap.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор: Влад Мержевич
Последнее изменение: 02.04.2018
Редакторы: Влад Мержевич
webref.ru
|
|
..:::Счетчики:::.. |
|
|
|
|
|
|
|
|