diff options
Diffstat (limited to 'files/ru/web/css/align-content/index.html')
| -rw-r--r-- | files/ru/web/css/align-content/index.html | 287 |
1 files changed, 287 insertions, 0 deletions
diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html new file mode 100644 index 0000000000..26d4bf0857 --- /dev/null +++ b/files/ru/web/css/align-content/index.html @@ -0,0 +1,287 @@ +--- +title: align-content +slug: Web/CSS/align-content +translation_of: Web/CSS/align-content +--- +<div>{{CSSRef}}</div> + +<p>Свойство {{cssxRef('', 'CSS')}} <strong><code>align-content</code></strong> устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси {{cssxRef('CSS_Flexible_Box_Layout', 'flexbox')}} контейнера или вдоль блочной оси {{cssxRef('CSS_Grid_Layout', 'grid')}} контейнера.</p> + +<p>The interactive example below use Grid Layout to demonstrate some of the values of this property.</p> + +<div>{{EmbedInteractiveExample("pages/css/align-content.html")}}</div> + +<p class="hidden">Источник этого интерактивного примера можно найти в репозитории на GitHub. Если Вы хотите посодействовать развитию проекта, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам запрос на включение кода.</p> + +<p>Это свойство не влияет на однострочные flex-контейнеры (т.е. с <code>flex-wrap: nowrap</code>)</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush:css no-line-numbers notranslate">/* Основное позиционное выравнивание */ +/* align-content не принимает значения left и right */ +align-content: center; /* Расположить элементы вокруг центра */ +align-content: start; /* Расположить элементы в начале */ +align-content: end; /* Расположить элементы в конце */ +align-content: flex-start; /* Расположить элементы flex в начале */ +align-content: flex-end; /* Расположить элементы flex в конце */ + +/* Нормальное выравнивание */ +align-content: normal; + +/* Выравнивание по базовой линии */ +align-content: baseline; +align-content: first baseline; +align-content: last baseline; + +/* Распределённое выравнивание */ +align-content: space-between; /* Распределить элементы равномерно + Первый элемент находится на одном уровне с началом, + последней - совпадает с концом */ +align-content: space-around; /* Распределить элементы равномерно + Элементы имеют половинное пространство + на каждом конце */ +align-content: space-evenly; /* Распределить элементы равномерно + Элементы имеют одинаковое пространство вокруг них */ +align-content: stretch; /* Распределить элементы равномерно + Растянуть 'auto'-размерные элементы, чтобы заполнить + контейнер */ + +/* Выравнивание переполнения (overflow) */ +align-content: safe center; +align-content: unsafe center; + +/* Глобальные значения */ +align-content: inherit; +align-content: initial; +align-content: unset; +</pre> + +<h3 id="Значения">Значения</h3> + +<dl> + <dt><code>start</code></dt> + <dd>Элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.</dd> + <dt><code>end</code></dt> + <dd>Элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.</dd> + <dt><code>flex-start</code></dt> + <dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.<br> + Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>start</code>.</dd> + <dt><code>flex-end</code></dt> + <dd>Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.<br> + Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как <code>end</code>.</dd> + <dt><code>center</code></dt> + <dd>Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.</dd> + <dt><code>normal</code></dt> + <dd>Элементы расположены в их дефолтной позиции как если бы <code>align-content</code> не было определено.</dd> + <dt><code>baseline<br> + first baseline</code><br> + <code>last baseline</code></dt> + <dd><img alt="базовая линия - это линия, на которой «сидит» большинство букв и ниже которой располагаются нижние выносные элементы (свисания)." src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Typography_Line_Terms.svg/410px-Typography_Line_Terms.svg.png" style="height: 110px; width: 410px;"></dd> + <dd>Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.<br> + Резервное выравнивание для <code>first baseline</code> равно <code>start</code>, для <code>last baseline</code> - <code>end</code>.</dd> + <dd><code>space-between</code></dd> + <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.</dd> + <dt><code>space-around</code></dt> + <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.</dd> + <dt><code>space-evenly</code></dt> + <dd>Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.</dd> + <dd><code>stretch</code></dd> + <dd>Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого <code>auto</code>-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.</dd> + <dt><code>safe</code></dt> + <dd>Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был <code>start</code>.</dd> + <dt><code>unsafe</code></dt> + <dd>Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.</dd> +</dl> + +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Пример">Пример</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[4] notranslate">#container { + height:200px; + width: 240px; + align-content: center; /* Can be changed in the live sample */ + background-color: #8c8c8c; +} + +.flex { + display: flex; + flex-wrap: wrap; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, 50px); +} + +div > div { + box-sizing: border-box; + border: 2px solid #8c8c8c; + width: 50px; + display: flex; + align-items: center; + justify-content: center; +} + +#item1 { + background-color: #8cffa0; + min-height: 30px; +} + +#item2 { + background-color: #a0c8ff; + min-height: 50px; +} + +#item3 { + background-color: #ffa08c; + min-height: 40px; +} + +#item4 { + background-color: #ffff8c; + min-height: 60px; +} + +#item5 { + background-color: #ff8cff; + min-height: 70px; +} + +#item6 { + background-color: #8cffff; + min-height: 50px; + font-size: 30px; +} + +select { + font-size: 16px; +} + +.row { + margin-top: 10px; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div id="container" class="flex"> + <div id="item1">1</div> + <div id="item2">2</div> + <div id="item3">3</div> + <div id="item4">4</div> + <div id="item5">5</div> + <div id="item6">6</div> +</div> + +<div class="row"> + <label for="display">display: </label> + <select id="display"> + <option value="flex">flex</option> + <option value="grid">grid</option> + </select> +</div> + +<div class="row"> + <label for="values">align-content: </label> + <select id="values"> + <option value="normal">normal</option> + <option value="stretch">stretch</option> + <option value="flex-start">flex-start</option> + <option value="flex-end">flex-end</option> + <option value="center" selected>center</option> + <option value="space-between">space-between</option> + <option value="space-around">space-around</option> + <option value="space-evenly">space-evenly</option> + + <option value="start">start</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + + <option value="baseline">baseline</option> + <option value="first baseline">first baseline</option> + <option value="last baseline">last baseline</option> + + <option value="safe center">safe center</option> + <option value="unsafe center">unsafe center</option> + <option value="safe right">safe right</option> + <option value="unsafe right">unsafe right</option> + <option value="safe end">safe end</option> + <option value="unsafe end">unsafe end</option> + <option value="safe flex-end">safe flex-end</option> + <option value="unsafe flex-end">unsafe flex-end</option> + </select> +</div> +</pre> + +<div class="hidden"> +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var values = document.getElementById('values'); +var display = document.getElementById('display'); +var container = document.getElementById('container'); + +values.addEventListener('change', function (evt) { + container.style.alignContent = evt.target.value; +}); + +display.addEventListener('change', function (evt) { + container.className = evt.target.value; +}); +</pre> +</div> + +<h3 id="Результат">Результат</h3> + +<p>{{EmbedLiveSample('Пример', 260, 290)}}</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Спецификация</th> + <th scope="col">Статус</th> + <th scope="col">Комментарий</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Добавлены значения [ first | last ]? baseline, start, end, left, right, unsafe | safe.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}</td> + <td>{{Spec2('CSS3 Flexbox')}}</td> + <td>Начальное определение</td> + </tr> + </tbody> +</table> + +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> + +<div>{{CompatibilityTable}}</div> + +<div> + + +<h3 id="Support_in_Flex_layout">Support in Flex layout</h3> + +<p>{{Compat("css.properties.align-content.flex_context")}}</p> + +<h3 id="Support_in_Grid_layout">Support in Grid layout</h3> + +<p>{{Compat("css.properties.align-content.grid_context")}}</p> +</div> + +<h2 id="Смотрите_также">Смотрите также</h2> + +<ul> + <li><a href="../../CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Использование гибких блоков CSS</a></li> +</ul> |