html.okpython.net
Основы создания сайтов
CSS :: Свойство align-content
css-свойство align-content (от англ. align content – выравнивать содержимое) используется для выравнивания строк и распределения пространства между ними вдоль поперечной оси флекс-контейнера, если флекс-элементов в контейнере достаточно много и у них есть возможность занимать несколько строк.
Характеристики
- Значение по умолчанию: stretch.
- Применяется: к флекс-контейнеру.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.alignContent="value".
Синтаксис
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch
Значения
- flex-start – строки располагаются в начале поперечной оси;
- flex-end – строки располагаются с конца поперечной оси;
- center – строки располагаются по центру флекс-контейнера;
- space-between – строки располагаются равномерно вдоль поперечной оси: расстояние между ними одинаково, но крайние строки прижимаются к соответствующим сторонам флекс-контейнера;
- space-around – строки располагаются равномерно вдоль поперечной оси: расстояние между ними одинаково, но расстояние между первой строкой и соответствующей стороной контейнера, а также расстояние между последней строкой и соответствующей стороной контейнера, равно половине расстояния между двумя соседними строками;
- space-evenly – строки располагаются полностью равномерно вдоль поперечной оси: расстояние между ними одинаково, при этом расстояние между первой строкой и соответствующей стороной контейнера, а также расстояние между последней строкой и соответствующей стороной контейнера, равно расстоянию между двумя соседними строками;
- stretch – строки равномерно растягиваются, заполняя свободное пространство (используется по умолчанию).
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-flexbox/#propdef-align-content
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/align-content
Подробнее о модуле Flexbox смотрите в нашем учебнике здесь.
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Оформляем родительские div'ы flex-элементов */ div{ display: flex; flex-wrap: wrap; align-items: center; width: 300px; height: 220px; margin: auto; margin-top: 10px; background-color: #DFDFDF; border-radius: 5px; } /* Это общий стиль flex-элементов */ p, span{ width: 60px; margin: auto; padding: 10px; background-color: #55aa55; border-radius: 5px; text-align: center; font-weight: bold; color: #F9F9F9; } /* Это класс для 1-го div'а */ .div_flex_1{ align-content: flex-start; } /* Это класс для 2-го div'а */ .div_flex_2{ align-content: flex-end; } /* Это класс для 3-го div'а */ .div_flex_3{ align-content: center; } /* Это класс для 4-го div'а */ .div_flex_4{ align-content: space-between; } /* Это класс для 5-го div'а */ .div_flex_5{ align-content: space-around; } /* Это класс для 6-го div'а */ .div_flex_6{ align-content: space-evenly; } </style> </head> <body> <div class="div_flex_1"> <p>1</p><span>2</span><p>3</p> <p>4</p><span>5</span><p>6</p> <p>7</p><span>8</span><p>9</p> </div> <div class="div_flex_2"> <p>1</p><span>2</span><p>3</p> <p>4</p><span>5</span><p>6</p> <p>7</p><span>8</span><p>9</p> </div> <div class="div_flex_3"> <p>1</p><span>2</span><p>3</p> <p>4</p><span>5</span><p>6</p> <p>7</p><span>8</span><p>9</p> </div> <div class="div_flex_4"> <p>1</p><span>2</span><p>3</p> <p>4</p><span>5</span><p>6</p> <p>7</p><span>8</span><p>9</p> </div> <div class="div_flex_5"> <p>1</p><span>2</span><p>3</p> <p>4</p><span>5</span><p>6</p> <p>7</p><span>8</span><p>9</p> </div> <div class="div_flex_6"> <p>1</p><span>2</span><p>3</p> <p>4</p><span>5</span><p>6</p> <p>7</p><span>8</span><p>9</p> </div> </body> </html>
Пример №1