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