aboutsummaryrefslogtreecommitdiff
path: root/files/ru/conflicting/web/css/css_flexible_box_layout
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-11 13:02:49 -0400
committerGitHub <noreply@github.com>2021-07-11 20:02:49 +0300
commit74f1c3c85cf4f0ff1cc631d1320ed90c404c6ed7 (patch)
tree2c73208a3ac6cea42c0aeedbf7d52d599688ea4c /files/ru/conflicting/web/css/css_flexible_box_layout
parentddda8bbbee128ba54ff6d3dd6a20a7d43debfb36 (diff)
downloadtranslated-content-74f1c3c85cf4f0ff1cc631d1320ed90c404c6ed7.tar.gz
translated-content-74f1c3c85cf4f0ff1cc631d1320ed90c404c6ed7.tar.bz2
translated-content-74f1c3c85cf4f0ff1cc631d1320ed90c404c6ed7.zip
delete conflicting/orphaned docs in ru (#1426)
Diffstat (limited to 'files/ru/conflicting/web/css/css_flexible_box_layout')
-rw-r--r--files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html380
1 files changed, 0 insertions, 380 deletions
diff --git a/files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
deleted file mode 100644
index e51bc42a20..0000000000
--- a/files/ru/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
+++ /dev/null
@@ -1,380 +0,0 @@
----
-title: Используем CSS Flexible Boxes
-slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
-translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
-translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
-original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
----
-<div>Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью:
-<h1 id="Основные_понятия_Flexbox"><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></h1>
-
-
-
-<p>У меня не поднялась рука удалить эту статью окончательно, но я рекомендую вам вместо неё, всё-таки, прочитать ту.</p>
-</div>
-
-<div>{{CSSRef}}</div>
-
-<p><span class="seoSummary">CSS3 <strong>Flexible Box</strong>, или просто <strong>flexbox</strong> — это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо в случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.</span> Во многих случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats) и не выполняет схлопывание отступлений flex-контейнера и его содержимого (margin collapse).</p>
-
-<p>Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.</p>
-
-<div class="note"><strong>Внимание:</strong> некоторые браузеры все ещё могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div>
-
-<h2 id="Концепция_Flexbox">Концепция Flexbox</h2>
-
-<p>Главной концепцией Flexbox есть возможность изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Flex-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.</p>
-
-<p>Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.</p>
-
-<h2 id="Терминология">Терминология</h2>
-
-<p>Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.</p>
-
-<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
-
-<dl>
- <dt>Flex-контейнер</dt>
- <dd>Родительский элемент, в котором содержатся flex-элементы. Flex-контейнер определяется установкой свойства {{Cssxref("display")}} в <code>flex</code> или <code>inline-flex</code>.</dd>
- <dt>Flex-элемент, flex item</dt>
- <dd>
- <p>Каждый дочерний элемент flex-контейнера становится flex-элементом. Текст, который напрямую содержится в flex-контейнере, оборачивается анонимным flex-элементом.</p>
- </dd>
- <dt>Оси</dt>
- <dd>
- <p>Каждый flexible-бокс шаблон строится по двум осям. Главная ось <strong>(main axis)</strong> — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось <strong>(cross axis)</strong> перпендикулярна ей.</p>
-
- <ul>
- <li>Свойство <code>{{Cssxref("flex-direction")}}</code> устанавливает главную ось.</li>
- <li>Свойство <code>{{Cssxref("justify-content")}}</code> определяет расположение элементов вдоль главной оси в текущем ряду.</li>
- <li>Свойство <a href="/ru/docs/Web/CSS/align-items"><code>align-items</code></a> расположение элементов вдоль перекрёстной оси в текущем ряду.</li>
- <li>Свойство <a href="/ru/docs/Web/CSS/align-self"><code>align-self</code></a> устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью <code>align-items.</code></li>
- </ul>
- </dd>
- <dt>Направления</dt>
- <dd>
- <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элементов. Они следуют по главной и перекрёстной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p>
-
- <ul>
- <li>Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.</li>
- <li>Свойство {{Cssxref("flex-flow")}} — это короткая форма, состоящая из свойств {{Cssxref("flex-direction")}} и {{Cssxref("flex-wrap")}}, определяющих расположение элементов.</li>
- </ul>
- </dd>
- <dt>Линии</dt>
- <dd>
- <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрёстных линий и направление в котором складываются новые линии.</p>
- </dd>
- <dt>Размеры</dt>
- <dd>
- <p>Флекс элементы агностически эквивалентны высоте и ширине <strong>главного размера</strong> и <strong>поперечного размера,</strong> которые равны, соответственно,  главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.</p>
-
- <ul>
- <li>Свойства <code><a href="/ru/docs/Web/CSS/min-height">min-height</a></code> и <code><a href="/ru/docs/Web/CSS/min-width">min-width</a></code> принимают значение по умолчанию 0.</li>
- <li>Свойство <a href="/ru/docs/Web/CSS/flex"><code>flex</code></a> - это сокращённая запись свойств <a href="/ru/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <code><a href="/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и</code> <code><a href="/ru/docs/Web/CSS/flex-basis">flex-basis</a>.</code></li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Делаем_элемент_флексбоксом">Делаем элемент флексбоксом</h2>
-
-<p>Чтобы сделать элемент flexible-боксом, укажите значение {{cssxref("display")}} следующим образом:</p>
-
-<pre class="brush: css">display: flex</pre>
-
-<p>или</p>
-
-<pre class="brush: css">display: inline-flex</pre>
-
-<p>Таким образом мы определяем элемент как флексбокс, а его дочерние элементы — как flex-элементы. Значение <code>flex</code> делает контейнер блочным элементом, а <code>inline-flex</code> значение превращает его в инлайн-элемент.</p>
-
-<div class="note"><span class="notranslate"><strong>Внимание</strong></span><strong>:</strong> для <span class="notranslate">указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту</span>. <span class="notranslate">Например</span>, <code>display: -webkit-flex</code>.</div>
-
-<h2 id="Рассмотрим_flex-элементы">Рассмотрим flex-элементы</h2>
-
-<p>Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение <code>display: none</code>).</p>
-
-<p>Абсолютно позиционированные дочерние элементы flex-контейнера позиционируются так, что их статическое положение определяется относительно главного начального угла содержащего их flex-контейнера.</p>
-
-<p>Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений <code>margin: auto </code>поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Выравнивание при помощи 'автоматических' отступов </a>в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.</p>
-
-<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надёжно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p>
-
-<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очерёдность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p>
-
-<h2 id="Свойства_Flexbox">Свойства Flexbox</h2>
-
-<h3 id="Свойства_не_влияющие_на_Flexbox">Свойства, не влияющие на Flexbox</h3>
-
-<p>Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:</p>
-
-<ul>
- <li>свойства <code>column-*</code> <a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">модуля с множественными столбцами</a> не влияет на flex-элементы.</li>
- <li>{{cssxref("clear")}} не действует на flex-элементах.</li>
- <li>{{cssxref("float")}} заставляет свойство элемента <code>display</code> считаться как <code>block</code>.</li>
- <li>{{cssxref("vertical-align")}} не оказывает эффекта на выравнивание flex-элементов.</li>
-</ul>
-
-<h2 id="Пример">Пример</h2>
-
-<h3 id="Типичный_пример_flex">Типичный пример flex</h3>
-
-<p>Типичный пример показывает как применять "flex-эффект" к элементам и как соседние элементы ведут себя в состоянии flex.</p>
-
-<pre class="brush: html">​&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
- &lt;head&gt;
- &lt;style&gt;
- .flex {
- /* basic styling */
- width: 350px;
- height: 200px;
- border: 1px solid #555;
- font: 14px Arial;
-
- /* flexbox setup */
- display: flex;
- flex-direction: row;
- }
-
- .flex &gt; div {
- flex: 1 1 auto;
- width: 30px; /* To make the transition work nicely. (Transitions to/from
- "width:auto" are buggy in Gecko and Webkit, at least.
- See http://bugzil.la/731886 for more info.) */
- transition: width 0.7s ease-out;
- }
-
- /* colors */
- .flex &gt; div:nth-child(1){ background: #009246; }
- .flex &gt; div:nth-child(2){ background: #F1F2F1; }
- .flex &gt; div:nth-child(3){ background: #CE2B37; }
-
- .flex &gt; div:hover {
- width: 200px;
- }
-
- &lt;/style&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;p&gt;Flexbox nuovo&lt;/p&gt;
- &lt;div class="flex"&gt;
- &lt;div&gt;uno&lt;/div&gt;
- &lt;div&gt;due&lt;/div&gt;
- &lt;div&gt;tre&lt;/div&gt;
- &lt;/div&gt;
- &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h3 id="Пример_расположения_Священный_Грааль">Пример расположения "Священный Грааль"</h3>
-
-<p>Данный пример показывает как flexbox предоставляет возможность динамически изменять расположение для различных разрешений экрана. Следующая схема иллюстрирует преобразование.</p>
-
-<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
-
-<p>Здесь изображён случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p>
-
-<pre class="brush: html">​&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
- &lt;head&gt;
- &lt;style&gt;
- body {
- font: 24px Helvetica;
- background: #999999;
- }
-
- #main {
- min-height: 800px;
- margin: 0px;
- padding: 0px;
- display: flex;
- flex-flow: row;
- }
-
- #main &gt; article {
- margin: 4px;
- padding: 5px;
- border: 1px solid #cccc33;
- border-radius: 7pt;
- background: #dddd88;
- flex: 3 1 60%;
- order: 2;
- }
-
- #main &gt; nav {
- margin: 4px;
- padding: 5px;
- border: 1px solid #8888bb;
- border-radius: 7pt;
- background: #ccccff;
- flex: 1 6 20%;
- order: 1;
- }
-
- #main &gt; aside {
- margin: 4px;
- padding: 5px;
- border: 1px solid #8888bb;
- border-radius: 7pt;
- background: #ccccff;
- flex: 1 6 20%;
- order: 3;
- }
-
- header, footer {
- display: block;
- margin: 4px;
- padding: 5px;
- min-height: 100px;
- border: 1px solid #eebb55;
- border-radius: 7pt;
- background: #ffeebb;
- }
-
- /* Too narrow to support three columns */
- @media all and (max-width: 640px) {
- #main, #page {
- flex-direction: column;
- }
-
- #main &gt; article, #main &gt; nav, #main &gt; aside {
- /* Return them to document order */
- order: 0;
- }
-
- #main &gt; nav, #main &gt; aside, header, footer {
- min-height: 50px;
- max-height: 50px;
- }
- }
- &lt;/style&gt;
- &lt;/head&gt;
- &lt;body&gt;
- &lt;header&gt;header&lt;/header&gt;
- &lt;div id='main'&gt;
- &lt;article&gt;article&lt;/article&gt;
- &lt;nav&gt;nav&lt;/nav&gt;
- &lt;aside&gt;aside&lt;/aside&gt;
- &lt;/div&gt;
- &lt;footer&gt;footer&lt;/footer&gt;
- &lt;/body&gt;
-&lt;/html&gt;</pre>
-
-<h2 id="Песочница">Песочница</h2>
-
-<p>Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:</p>
-
-<ul>
- <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
- <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
- <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
- <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li>
-</ul>
-
-<h2 id="О_чем_нужно_помнить">О чем нужно помнить</h2>
-
-<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при вёрстке с использованием flexbox.</p>
-
-<p>Flexbox располагаются в соответствие с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">направлением письма</a>, что означает, что <strong>главное начало</strong> и <strong>главный конец </strong>располагаются в зависимости от положения <strong>начала </strong>и <strong>конца </strong>(строки - <em>прим.</em>).</p>
-
-<p><strong>Перекрёстное начало</strong> и <strong>перекрёстный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p>
-
-<p>Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство <code>break-. Свойства </code>CSS3 <code>break-after</code>, <code>break-before</code> и <code>break-inside</code>, а также свойства CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> и <code>page-break-inside</code> работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.</p>
-
-<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
-
-<p>{{CompatibilityTable}}</p>
-
-<div id="compat-desktop">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Firefox (Gecko)</th>
- <th>Chrome</th>
- <th>Internet Explorer</th>
- <th>Opera</th>
- <th>Safari</th>
- </tr>
- <tr>
- <td>Basic support (single-line flexbox)</td>
- <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
- {{CompatGeckoDesktop("22.0")}}</td>
- <td>21.0{{property_prefix("-webkit")}}<br>
- 29.0</td>
- <td>11<sup>[3]</sup></td>
- <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
- <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
- </tr>
- <tr>
- <td>Multi-line flexbox</td>
- <td>{{CompatGeckoDesktop("28.0")}}</td>
- <td>21.0{{property_prefix("-webkit")}}<br>
- 29.0</td>
- <td>11<sup>[3]</sup></td>
- <td>12.10<sup>[5]</sup><br>
- 15 {{property_prefix("-webkit")}}</td>
- <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<div id="compat-mobile">
-<table class="compat-table">
- <tbody>
- <tr>
- <th>Feature</th>
- <th>Firefox Mobile (Gecko)</th>
- <th>Firefox OS</th>
- <th>Android</th>
- <th>IE Phone</th>
- <th>Opera Mobile</th>
- <th>Safari Mobile</th>
- </tr>
- <tr>
- <td>Basic support (single-line flexbox)</td>
- <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
- {{CompatGeckoMobile("22.0")}}</td>
- <td>
- <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
- 1.1</p>
- </td>
- <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
- 4.4</td>
- <td>11</td>
- <td>12.10<sup>[5]</sup><br>
- 15{{property_prefix("-webkit")}}</td>
- <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
- </tr>
- <tr>
- <td>Multi-line flexbox</td>
- <td>{{CompatGeckoMobile("28.0")}}</td>
- <td>1.3</td>
- <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
- 4.4</td>
- <td>11</td>
- <td>12.10<sup>[5]</sup><br>
- 15{{property_prefix("-webkit")}}</td>
- <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлён для поддержки финальной версии.</p>
-
-<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключён в Firefox 28.</p>
-
-<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлён</a> для поддержки финальной версии.</p>
-
-<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлён для поддержки финальной версии.</p>
-
-<p>[5] Хотя изначальная реализация в Opera 12.10 <code>flexbox</code> была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.</p>
-
-<p>[6] До Firefox 29, <code>установка visibility: collapse</code> для flex-элемента заставляет его обрабатываться как <code>display: none</code> вместо предполагаемого поведения, обрабатывающего его как <code>visibility: hidden</code>. Предложенное решение - использовать <code>visibility:hidden</code> для flex-элементов, которые должны вести себя как при установленном <code>visibility:collapse</code>. Для большей информации, см {{bug(783470)}}.</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="https://github.com/philipwalton/flexbugs">Проект Flexbugs </a>для информации о багах в браузерных реализациях flexbox.</li>
-</ul>