Перейти к основному содержанию

Новости

Тема: grid css (Прочитано 390 раз) предыдущая тема - следующая тема

  • inter 😎
  • [*][*][*][*][*]
  • Царь
grid css
Enable CSS Grid Layout

Browser Support for CSS Grid Layout

Dev guide: Grid layout - Microsoft Edge Development

Золотая рыбка CSS3 Grid Layout

layout.css.grid.enabled

CSS Grid Layout. Готовность номер один -- Наталья Короткова -- Girls Not Bombs #6
  • Последнее редактирование: 06 Февраль 2017, 15:26:48 by inter

  • testuser
  • [*][*]
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: Ряды растягиваются, чтоб заполнить контейнер равномерно.

Спойлер (кликнуть чтобы показать/скрыть)
  • Последнее редактирование: 17 Октябрь 2018, 13:45:38 by testuser