CSS flexbox - модуль макета гибкого контейнера

Статья

Автор: По материалам сайта: link ★ (id:1)
Дата: 2025-01-30 15:51:12

Категории: Интернет, сети, web; История;

<h1 data-placeholder="Введите заголовок">2.23. CSS flexbox</h1><h4 data-placeholder="Введите или вставьте сюда ваш текст"><a href="https://html5book.ru/css3-flexbox/">По материалам сайта html5book.ru</a></h4><p><br data-cke-filler="true"></p><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/css-flexbox.png" alt=""><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера — представляет собой способ компоновки элементов, в основе лежит идея оси.</h4><h4>Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.</h4><h4>Модуль flexbox позволяет решать следующие задачи:</h4><h4>Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх.</h4><h4>Переопределять порядок отображения элементов.</h4><h4>Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство.</h4><h4>Решать проблему с горизонтальным и вертикальным центрированием.</h4><h4>Переносить элементы внутри контейнера, не допуская его переполнения.</h4><h4>Создавать колонки одинаковой высоты.</h4><h4>Создавать прижатый к низу страницы <a href="https://codepen.io/html5book/pen/QMLRLR">подвал сайта</a>.</h4><h4>Flexbox решает специфические задачи — создание одномерных макетов, например, навигационной панели, так как flex-элементы можно размещать только по одной из осей.</h4><h4>Список текущих проблем модуля и кросс-браузерных решений для них вы можете прочитать в статье Philip Walton <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a>.</h4><h4>Что такое flexbox</h4><h3>Содержание:</h3><h3><a href="#part1">1. Основные понятия</a></h3><h3><a href="#display-flex">2. Flex-контейнер</a></h3><h3><a href="#display-items">3. Flex-элементы</a></h3><h3><a href="#flex-order">4. Порядок отображения flex-элементов и ориентация</a></h3><h3><a href="#flex-direction">4.1. Направление главной оси: flex-direction</a></h3><h3><a href="#flex-wrap">4.2. Управление многострочностью flex-контейнера: flex-wrap</a></h3><h3><a href="#flex-flow">4.3. Краткая запись направления и многострочности: flex-flow</a></h3><h3><a href="#order">4.4. Порядок отображения flex-элементов: order</a></h3><h3><a href="#flexibility">5. Гибкость flex-элементов</a></h3><h3><a href="#flex">5.1. Задание гибких размеров одним свойством: flex</a></h3><h3><a href="#flex-grow">5.2. Коэффициент роста: flex-grow</a></h3><h3><a href="#flex-shrink">5.3. Коэффициент сжатия: flex-shrink</a></h3><h3><a href="#flex-basis">5.4. Базовый размер: flex-basis</a></h3><h3><a href="#alignment">6. Выравнивание</a></h3><h3><a href="#justify-content">6.1. Выравнивание по главной оси: justify-content</a></h3><h3><a href="#align">6.2. Выравнивание по поперечной оси: align-items и align-self</a></h3><h3><a href="#align-content">6.3. Выравнивание строк flex-контейнера: align-content</a></h3><h4>Поддержка браузерами</h4><blockquote><h4>IE: 11.0, 10.0 -ms-</h4><p>Firefox: 28.0, 18.0 -moz-<br>Chrome: 29.0, 21.0 -webkit-<br>Safari: 6.1 -webkit-<br>Opera: 12.1 -webkit-<br>iOS Safari: 7.0 -webkit-<br>Opera Mini: 8<br>Android Browser: 4.4, 4.1 -webkit-<br>Chrome for Android: 44</p></blockquote><h4>1. Основные понятия</h4><p><span class="image-inline ck-widget image_resized ck-widget_with-resizer" style="width:67.37%;" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/box-model.png" alt="box-model"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 1. МОДЕЛЬ FLEXBOX</h4><h4>Для описания модуля Flexbox используется определенный набор терминов. Значение flex-flow и режим записи определяют соответствие этих терминов физическим направлениям: верх / право / низ / лево, осям: вертикальная / горизонтальная и размерам: ширина / высота.</h4><h4>Главная ось (main axis) — ось, вдоль которой выкладываются flex-элементы. Она простирается в основном измерении.</h4><h4>Main start и main end — линии, которые определяют начальную и конечную стороны flex-контейнера, относительно которых выкладываются flex-элементы (начиная с main start по направлению к main end).</h4><h4>Основной размер (main size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что из них находится в основном измерении, определяют основной размер flex-контейнера или flex-элемента.</h4><h4>Поперечная ось (cross axis) — ось, перпендикулярная главной оси. Она простирается в поперечном измерении.</h4><h4>Cross start и cross end — линии, которые определяют начальную и конечную стороны поперечной оси, относительно которых выкладываются flex-элементы.</h4><h4>Поперечный размер (cross size) — ширина или высота flex-контейнера или flex-элементов, в зависимости от того, что находится в поперечном измерении, являются их поперечным размером.</h4><p><span class="image-inline ck-widget image_resized ck-widget_with-resizer" style="width:65.02%;" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2019/02/flexbox-mode.jpg" alt=""><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 2. РЕЖИМ СТРОКИ И КОЛОНКИ</h4><h4>2. Flex-контейнер</h4><h4>Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-*, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter.</h4><h4>Модель flexbox-разметки связана с определенным значением CSS-свойства display родительского html-элемента, содержащего внутри себя дочерние блоки. Для управления элементами с помощью этой модели нужно установить свойство display следующим образом:</h4><h4>.flex-container { /*генерирует flex-контейнер уровня блока*/ display: -webkit-flex; display: flex; } .flex-container { /*генерирует flex-контейнер уровня строки*/ display: -webkit-inline-flex; display: inline-flex; }</h4><h4>CSS</h4><h4>После установки данных значений свойства каждый дочерний элемент автоматически становится flex-элементом, выстраиваясь в один ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних полей и рамок элемента.</h4><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/display-flex.png" alt="display-flex"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 3. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ В МОДЕЛИ FLEXBOX</h4><h4>Если родительский блок содержит текст или изображения без оберток, они становятся анонимными flex-элементами. Текст выравнивается по верхнему краю блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно деформируется.</h4><h4>3. Flex-элементы</h4><h4>Flex-элементы — блоки, представляющие содержимое flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст форматирования для своего содержимого, который обуславливает следующие особенности:</h4><h4>Для flex-элементов блокируется их значение свойства display. Значение display: inline-block; и display: table-cell; вычисляется в display: block;.</h4><h4>Пустое пространство между элементами исчезает: оно не становится своим собственным flex-элементом, даже если межэлементный текст обернут в анонимный flex-элемент. Для содержимого анонимного flex-элемента невозможно задать собственные стили, но оно будет наследовать их (например, параметры шрифта) от flex-контейнера.</h4><h4>Абсолютно позиционированный flex-элемент не участвует в компоновке гибкого макета.</h4><h4>Поля margin соседних flex-элементов не схлопываются.</h4><h4>Процентные значения margin и padding вычисляются от внутреннего размера содержащего их блока.</h4><h4>margin: auto; расширяются, поглощая дополнительное пространство в соответствующем измерении. Их можно использовать для выравнивания или раздвигания смежных flex-элементов.</h4><h4>Автоматический минимальный размер flex-элементов по умолчанию является минимальным размером его содержимого, то есть min-width: auto;. Для контейнеров с прокруткой автоматический минимальный размер обычно равен нулю.</h4><h4>4. Порядок отображения flex-элементов и ориентация</h4><h4>Содержимое flex-контейнера можно разложить в любом направлении и в любом порядке (переупорядочение flex-элементов внутри контейнера влияет только на визуальный рендеринг).</h4><h4>4.1. Направление главной оси: flex-direction</h4><h4>Свойство относится к flex-контейнеру. Управляет направлением главной оси, вдоль которой укладываются flex-элементы, в соответствии с текущим режимом записи. Не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-direction</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">row</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">row-reverse</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">column</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">column-reverse</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/flex-direction.png" alt=""><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 4. СВОЙСТВО FLEX-DIRECTION ДЛЯ LEFT-TO-RIGHT ЯЗЫКОВ</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row-reverse; }</h4><h4>CSS</h4><h4>4.2. Управление многострочностью flex-контейнера: flex-wrap</h4><h4>Свойство определяет, будет ли flex-контейнер однострочным или многострочным, а также задает направление поперечной оси, определяющее направление укладки новых линий flex-контейнера.</h4><h4>По умолчанию flex-элементы укладываются в одну строку, вдоль главной оси. При переполнении они будут выходить за пределы ограничивающей рамки flex-контейнера. Свойство не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-wrap</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">nowrap</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">wrap</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">wrap-reverse</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/flex-wrap.png" alt="flex-wrap"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 5. УПРАВЛЕНИЕ МНОГОСТРОЧНОСТЬЮ С ПОМОЩЬЮ СВОЙСТВА FLEX-WRAP ДЛЯ LTR-ЯЗЫКОВ</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap; }</h4><h4>CSS</h4><h4>4.3. Краткая запись направления и многострочности: flex-flow</h4><h4>Свойство позволяет определить направления главной и поперечной осей, а также возможность переноса flex-элементов при необходимости на несколько строк. Представляет собой сокращённую запись свойств flex-direction и flex-wrap. Значение по умолчанию flex-flow: row nowrap;. свойство не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-flow</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">направление</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">многострочность</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap; }</h4><h4>CSS</h4><h4>4.4. Порядок отображения flex-элементов: order</h4><h4>Свойство определяет порядок, в котором flex-элементы отображаются и располагаются внутри flex-контейнера. Применяется к flex-элементам. Свойство не наследуется.</h4><h4>Первоначально все flex-элементы имеют order: 0;. При указании значения от -1 для элемента он перемещается в начало сроки, значение 1 — в конец. Если несколько flex-элементов имеют одинаковое значение order, они будут отображаться в соответствии с исходным порядком.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">order</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">число</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-order: 1; order: 1; }</h4><h4>CSS</h4><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/order.png" alt="order"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 6. ПОРЯДОК ОТОБРАЖЕНИЯ FLEX-ЭЛЕМЕНТОВ</h4><h4>5. Гибкость flex-элементов</h4><h4>Определяющим аспектом гибкого макета является возможность «сгибать» flex-элементы, изменяя их ширину / высоту (в зависимости от того, какой размер находится на главной оси), чтобы заполнить доступное пространство в основном измерении. Это делается с помощью свойства flex. Flex-контейнер распределяет свободное пространство между своими дочерними элементами (пропорционально их коэффициенту flex-grow) для заполнения контейнера или сжимает их (пропорционально их коэффициенту flex-shrink), чтобы предотвратить переполнение.</h4><h4>Flex-элемент будет полностью «негибок», если его значения flex-grow и flex-shrink равны нулю, и «гибкий» в противном случае.</h4><h4>5.1. Задание гибких размеров одним свойством: flex</h4><h4>Свойство является сокращённой записью свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию: flex: 0 1 auto;. Можно указывать как одно, так и все три значения свойств. Свойство не наследуется.</h4><h4>W3C рекомендует использовать сокращённую запись, так как она правильно сбрасывает любые неуказанные компоненты, чтобы подстроиться под типичное использование.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">коэффициент растяжения</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">коэффициент сужения</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">базовая ширина</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">auto</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">none</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex: 3 1 100px; -ms-flex:  3 1 100px; flex:  3 1 100px; }</h4><h4>CSS</h4><h4>5.2. Коэффициент роста: flex-grow</h4><h4>Свойство определяет коэффициент роста одного flex-элемента относительно других flex-элементов в flex-контейнере при распределении положительного свободного пространства. Если сумма значений flex-grow flex-элементов в строке меньше 1, они занимают менее 100% свободного пространства. Свойство не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-grow</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">число</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><a href="https://codepen.io/html5book/pen/KEqOJB"><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2019/03/flex-grow-navbar.png" alt=""><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></a></p><h4>РИС. 7. УПРАВЛЕНИЕ СВОБОДНЫМ ПРОСТРАНСТВОМ В ПАНЕЛИ НАВИГАЦИИ С ПОМОЩЬЮ FLEX-GROW</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-grow: 3; flex-grow: 3; }</h4><h4>CSS</h4><h4>5.3. Коэффициент сжатия: flex-shrink</h4><h4>Свойство указывает коэффициент сжатия flex-элемента относительно других flex-элементов при распределении отрицательного свободного пространства. Умножается на базовый размер flex-basis. Отрицательное пространство распределяется пропорционально тому, насколько элемент может сжаться, поэтому, например, маленький flex-элемент не уменьшится до нуля, пока не будет заметно уменьшен flex-элемент большего размера. Свойство не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-shrink</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">число</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/flex-shrink.png" alt="flex-shrink"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 8. СУЖЕНИЕ FLEX-ЭЛЕМЕНТОВ В СТРОКЕ</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-shrink: 3; flex-shrink: 3; }</h4><h4>CSS</h4><h4>5.4. Базовый размер: flex-basis</h4><h4>Свойство устанавливает начальный основной размер flex-элемента до распределения свободного пространства в соответствии с коэффициентами гибкости. Для всех значений, кроме auto и content, базовый гибкий размер определяется так же, как width в горизонтальных режимах записи. Процентные значения определяются относительно размера flex-контейнера, а если размер не задан, используемым значением для flex-basis являются размеры его содержимого. Не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-basis</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">auto</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">content</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">длина</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-flex-basis: 100px; flex-basis: 100px; }</h4><h4>CSS</h4><h4>6. Выравнивание</h4><h4>6.1. Выравнивание по главной оси: justify-content</h4><h4>Свойство выравнивает flex-элементы по главной оси flex-контейнера, распределяя свободное пространство, незанятое flex-элементами. Когда элемент преобразуется в flex-контейнер, flex-элементы по умолчанию сгруппированы вместе (если для них не заданы поля margin). Промежутки добавляются после расчета значений margin и flex-grow. Если какие-либо элементы имеют ненулевое значение flex-grow или margin: auto;, свойство не будет оказывать влияния. Свойство не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">justify-content</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-start</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-end</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">center</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">space-between</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">space-around</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/justify-content.png" alt="justify-content"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 9. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ И РАСПРЕДЕЛЕНИЕ СВОБОДНОГО ПРОСТРАНСТВА С ПОМОЩЬЮ СВОЙСТВА JUSTIFY-CONTENT</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; -webkit-justify-content: flex-start; display: flex; justify-content: flex-start; }</h4><h4>CSS</h4><h4>6.2. Выравнивание по поперечной оси: align-items и align-self</h4><h4>Flex-элементы можно выравнивать по поперечной оси текущей строки flex-контейнера. align-items устанавливает выравнивание для всех элементов flex-контейнера, включая анонимные flex-элементы. align-self позволяет переопределить это выравнивание для отдельных flex-элементов. Если любое из поперечных margin flex-элемента имеет значение auto, align-self не имеет никакого влияния.</h4><h4>6.2.1. Align-items</h4><h4>Свойство выравнивает flex-элементы, в том числе и анонимные flex-элементы по поперечной оси. Не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">align-items</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-start</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-end</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">center</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">baseline</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">stretch</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/align-items.png" alt="align-items"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 10. ВЫРАВНИВАНИЕ ЭЛЕМЕНТОВ В КОНТЕЙНЕРЕ ПО ВЕРТИКАЛИ</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; -webkit-align-items: flex-start; display: flex; align-items: flex-start; }</h4><h4>CSS</h4><h4>6.2.2. Align-self</h4><h4>Свойство отвечает за выравнивание отдельно взятого flex-элемента по высоте flex-контейнера. Переопределяет выравнивание, заданное align-items. Не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">align-self</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">auto</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-start</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-end</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">center</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">baseline</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">stretch</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/align-self.png" alt="align-self"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 11. ВЫРАВНИВАНИЕ ОТДЕЛЬНЫХ FLEX-ЭЛЕМЕНТОВ</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; display: flex; } .flex-item { -webkit-align-self: center; align-self: center; }</h4><h4>CSS</h4><h4>6.3. Выравнивание строк flex-контейнера: align-content</h4><h4>Свойство выравнивает строки в flex-контейнере при наличии дополнительного пространства на поперечной оси, аналогично выравниванию отдельных элементов на главной оси с помощью свойства justify-content. Свойство не влияет на однострочный flex-контейнер. Не наследуется.</h4><figure class="table ck-widget ck-widget_with-selection-handle" contenteditable="false"><div class="ck ck-widget__selection-handle"><svg class="ck ck-icon" viewBox="0 0 16 16"><path d="M4 0v1H1v3H0V.5A.5.5 0 0 1 .5 0H4zm8 0h3.5a.5.5 0 0 1 .5.5V4h-1V1h-3V0zM4 16H.5a.5.5 0 0 1-.5-.5V12h1v3h3v1zm8 0v-1h3v-3h1v3.5a.5.5 0 0 1-.5.5H12z"></path><path fill-opacity=".256" d="M1 1h14v14H1z"></path><g class="ck-icon__selected-indicator"><path d="M7 0h2v1H7V0zM0 7h1v2H0V7zm15 0h1v2h-1V7zm-8 8h2v1H7v-1z"></path><path fill-opacity=".254" d="M1 1h14v14H1z"></path></g></svg></div><table><thead><tr><th class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">align-content</span></th></tr></thead><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">Значения:</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-start</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">flex-end</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">center</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">space-between</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">space-around</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">stretch</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">initial</span></td></tr><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span class="ck-table-bogus-paragraph">inherit</span></td></tr></tbody></table><div class="ck ck-reset_all ck-widget__type-around"><div class="ck ck-widget__type-around__button ck-widget__type-around__button_before" title="Вставить параграф перед блоком"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__button ck-widget__type-around__button_after" title="Вставить параграф после блока"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 8"><path d="M9.055.263v3.972h-6.77M1 4.216l2-2.038m-2 2 2 2.038"></path></svg></div><div class="ck ck-widget__type-around__fake-caret"></div></div></figure><p><span class="image-inline ck-widget ck-widget_with-resizer" contenteditable="false"><img src="https://html5book.ru/wp-content/uploads/2015/06/align-content.png" alt="align-content"><div class="ck ck-reset_all ck-widget__resizer" style="display: none;"><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-left"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-top-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-right"></div><div class="ck-widget__resizer__handle ck-widget__resizer__handle-bottom-left"></div><div class="ck ck-size-view" style="display: none;"></div></div></span></p><h4>РИС. 12. МНОГОСТРОЧНОЕ ВЫРАВНИВАНИЕ FLEX-ЭЛЕМЕНТОВ</h4><h4>Синтаксис</h4><h4>.flex-container { display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: flex-end; display: flex; flex-flow: row wrap; align-content: flex-end; height: 100px; }</h4>

Комментарии: 2

	stasik 2021-05-18 04:27:48 Можно и нужно пользоваться
	borkich 2020-06-09 18:48:16 Требует тщательной проверки

Чтобы написать комментарий нужно, зарегистрироваться

Голосования и тесты: 1

stasik ★ 2020-07-07 20:31:51 ★

❆ Каким образом создается гибкий контейнер, который будет содержать flex - элементы?

	[11:48]
	[🔒]

Статьи, публикации, обзоры, заметки