Re: grid css
Ответ #1 –
CSS Flex
http://flexboxfroggy.com
justify-content
Это CSS свойство выравнивает элементы горизонтально и принимает следующие значения:
flex-start: Элементы выравниваются по левой стороне контейнера.
flex-end: Элементы выравниваются по правой стороне контейнера.
center: Элементы выравниваются по центру контейнера.
space-between: Элементы отображаются с одинаковыми отступами между ними.
space-around: Элементы отображаются с одинаковыми отступами вокруг них.
align-items
Это CSS свойство выравнивает элементы вертикально и принимает следующие значения:
flex-start: Элементы выравниваются по верхнему краю контейнера.
flex-end: Элементы выравниваются по нижнему краю контейнера.
center: Элементы выравниваются вертикально по центру контейнера.
baseline: Элементы отображаются на базовой линии контейнера.
stretch: Элементы растягиваются, чтоб заполнить контейнер.
flex-direction
Это CSS свойство задает направление, в котором будут расположены элементы в контейнере и принимает следующие значения:
row: Элементы размещаются по направлению текста.
row-reverse: Элементы отображаются в обратном порядке к направлению текста.
column: Элементы распологаются сверху вниз.
column-reverse: Элементы распологаются снизу вверх.
flex-wrap
Это CSS свойство принимает следующие значения:
nowrap: Размеры элементов устанавливаются автоматически, чтоб они поместились в один ряд.
wrap: Элементы автоматически переносятся на новую строку.
wrap-reverse: Элементы автоматически переносятся на новую строку, но строки расположены в обратном порядке.
align-content
как несколько рядов должны отделяться друг от друга.
Данное свойство принимает следующие значения:
flex-start: Ряды группируются в верхней части контейнера.
flex-end: Ряды группируются в нижней части контейнера.
center: Ряды группируются вертикально по центру контейнера.
space-between: Ряды отображаются с одинаковыми расстояниями между ними.
space-around: Ряды отображаются с одинаковыми расстояниями вокруг них.
stretch: Ряды растягиваются, чтоб заполнить контейнер равномерно.
justify-content: center;
align-items: center;
flex-direction: column-reverse;
order: ;
align-self: ;
flex-wrap: wrap-reverse;
flex-flow: ;
align-content: space-between;
Тема: grid css (Прочитано 2278 раз)
предыдущая тема - следующая тема
