Как создать сетку на странице. CSS-свойство flex

Свойство flex — это один из двух инструментов для построения сеток и микросеток на странице. Свойство основано на концепции гибкого макета, где элементы могут растягиваться или сжиматься, чтобы использовать доступное пространство на странице наиболее эффективно.

Синтаксис

ul {
  display: flex;
  flex-direction: row;
}

Значения свойства flex

• flex-grow
• flex-shrink
• flex-basis
• flex-direction
• flex-wrap
• justify-content
• align-items
• align-self
• order

Разберём значения на примерах.

Flex-grow

Значение flex-grow определяет, как элементы будут растягиваться внутри контейнера, когда есть свободное пространство. flex-grow может принимать целые или дробные числовые значения и по умолчанию равно 0. Если задать flex-grow значение больше нуля, то флекс-элемент растянется на всё оставшееся во флекс-контейнере свободное пространство.

.container {
  display: flex;
}

.item-puppy {
  flex-grow: 0;
}

.item-cat {
  flex-grow: 1;
}

Если флекс-элементам задать одинаковые положительные значения flex-grow, то они поровну поделят между собой свободное пространство.

.container {
  display: flex;
}

.item-puppy {
  flex-grow: 1;
}

.item-cat {
  flex-grow: 1;
}

Flex-shrink

Значение flex-shrink отвечает за гибкость и сжатие элементов, когда доступное пространство ограничено. Принимает числовое значение, которое указывает, какую долю свободного пространства элемент займёт при сжатии относительно других элементов в контейнере. По умолчанию равно 1.

Все флекс-элементы по умолчанию могут сжиматься, если после определения размеров выяснилось, что места во флекс-контейнере не хватает. Если один элемент имеет flex-shrink: 2, а другие — flex-shrink: 1, первый элемент будет сжиматься в два раза больше остальных. В целом значение flex-shrink используется достаточно редко. Если в микросетке большое количество элементов, то обычно сразу включают многострочный флекс-контейнер, чтобы элементы не деформировались.

.container {
  display: flex;
}

.item-puppy {
  flex-shrink: 2;
}

.item-cat {
  flex-shrink: 1;
}

.item-corgi {
  flex-shrink: 1;
}

Flex-basis

Свойство flex-basis задает начальный размер элемента перед распределением доступного пространства. Можно указать значение в px, mm или в процентах вдоль главной оси. Значение по умолчанию — auto.

Свойство flex-basis сильнее width и height, оно их переопределит, если встретится с ними на одном и том же флекс-элементе.

.container {
  display: flex;
}

.item-puppy {
  height: 220px;
  width: 220px;
  flex-basis: 300px;
}

.item-cat {
  height: 220px;
  width: 220px;
}

.item-corgi {
  height: 220px;
  width: 220px;
}

Flex-direction

Свойство flex-direction определяет направление элементов в контейнере — горизонтальное или вертикальное, что дает большую гибкость в создании различных макетов.

Можно указать одно из четырех значений:

row — значение по умолчанию, указывает, что элементы располагаются горизонтально в контейнере. Порядок элементов определяется их последовательностью в разметке.

.container { 
  display: flex; 
  flex-direction: row;
}

row-reverse указывает, что элементы располагаются в контейнере горизонтально, но в обратном порядке. Первый элемент становится последним, а последний элемент — первым.

css .container { display: flex; flex-direction: row-reverse; }

column указывает, что элементы располагаются вертикально в контейнере. Каждый элемент занимает отдельную строку внутри контейнера.

css .container { display: flex; flex-direction: column; }

column-reverse указывает, что элементы располагаются в контейнере вертикально, но в обратном порядке. Первый элемент перемещается на последнее место, а последний — на первое.

.container {
  display: flex;
  flex-direction: column-reverse;
}

Flex-wrap

Свойство flex-wrap определяет, должны ли элементы переноситься на новую строку или оставаться на одной. Имеет три значения — nowrap, wrap, wrap-reverse.

nowrap — значение по умолчанию, указывает, что элементы располагаются в контейнере в одну строку или столбец. Если элементы не помещаются по ширине или высоте контейнера, они будут масштабироваться.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

.blue {
  height: 220px;
  width: 220px;
  background: #4b9eb3;
}
  
.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
}

.pink {
  height: 220px;
  width: 220px;
  background: #e78830;
}
  
.item-cat {
  height: 220px;
  width: 220px;
  background-image: url(./images/cat.jpg);
}

wrap — элементы могут переноситься на следующую строку или столбец, если они не помещаются. Это позволяет создавать многострочные или многоколоночные макеты. Элементы будут размещены в новых строках или столбцах сверху вниз или слева направо, в зависимости от ориентации основной оси.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.blue {
  height: 220px;
  width: 220px;
  background: #4b9eb3;
}
  
.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
}

.pink {
  height: 220px;
  width: 220px;
  background: #e78830;
}
  
.item-cat {
  height: 220px;
  width: 220px;
  background-image: url(./images/cat.jpg);
}
  
.green {
  height: 220px;
  width: 220px;
  background: #4bb381;
}

.item-corgi {
  height: 220px;
  width: 220px;
  background-image: url(./images/corgi.jpg); 
 }

wrap-reverse — значение работает аналогично wrap, но элементы будут переноситься на следующую строку или столбец в обратном порядке. Например, если в flex-direction указано row, элементы будут переноситься на новую строку справа налево.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap-reverse;
}

.blue {
  height: 220px;
  width: 220px;
  background: #4b9eb3;
}
  
.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
}

.pink {
  height: 220px;
  width: 220px;
  background: #e78830;
}
  
.item-cat {
  height: 220px;
  width: 220px;
  background-image: url(./images/cat.jpg);
}
  
.green {
  height: 220px;
  width: 220px;
  background: #4bb381;
}

.item-corgi {
  height: 220px;
  width: 220px;
  background-image: url(./images/corgi.jpg); 
}

Justify-content

Свойство justify-content распределяет элементы вдоль главной оси контейнера.

У свойства есть ряд значений:

flex-start — значение по умолчанию, оно указывает, что флекс-элементы выровнены по началу главной оси контейнера. Если основная ось направлена горизонтально, то элементы будут выравниваться слева, а если ось направлена вертикально, то элементы будут выравниваться сверху.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

flex-end указывает, что флекс-элементы выровнены по концу главной оси контейнера. Если основная ось направлена горизонтально, то элементы будут выравниваться справа, а если ось направлена вертикально — снизу.

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

center указывает, что флекс-элементы выровнены по центру главной оси контейнера. Элементы будут выравниваться горизонтально или вертикально в центре контейнера.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

space-between указывает, что флекс-элементы равномерно распределены вдоль главной оси контейнера. Первый элемент будет выровнен в начале оси, а последний элемент — в конце. Промежутки между элементами будут распределены равномерно.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

space-around означает, что флекс-элементы равномерно распределены вдоль главной оси контейнера с равными промежутками как до, так и после каждого элемента.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

space-evenly указывает, что элементы равномерно распределены вдоль главной оси контейнера, и промежутки между ними и на краях контейнера равны.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

Align-items

Свойство align-items определяет выравнивание элементов вдоль поперечной оси контейнера.

align-items имеет несколько значений:

flex-start — флекс-элементы выровнены по началу поперечной оси контейнера. Если поперечная ось направлена горизонтально, то элементы будут выравниваться вверху, а если ось направлена вертикально, то элементы будут выравниваться слева.

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

flex-end — флекс-элементы выровнены по концу поперечной оси контейнера.

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

center — флекс-элементы выровнены по центру поперечной оси контейнера. Элементы будут выравниваться горизонтально или вертикально в центре контейнера.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

baseline — флекс-элементы выровнены по базовой линии, которая обычно используется для выравнивания текста.

stretch — значение по умолчанию. Указывает, что элементы должны растягиваться по высоте или ширине контейнера, чтобы занять всю доступную площадь вдоль поперечной оси. Это значение делает флекс-элементы одинаковой высоты или ширины, в зависимости от ориентации поперечной оси.

Align-self

Свойство align-self определяет выравнивание отдельного элемента вдоль поперечной оси контейнера. Это свойство задаётся флекс-элементу, а не флекс-контейнеру, и имеет такие же значения, как свойство align-items.

.container {
  display: flex;
  flex-direction: column;
  align-items: baseline;
}

.item-puppy {
  height: 220px;
  width: 220px;
  background-image: url(./images/puppy.jpg);  
  align-self: center;
}

Order

Значение order определяет порядок отображения элементов в контейнере, задаётся нужному флекс-элементу. Числовое значение определяет порядковый номер элемента, и чем меньше число, тем ближе элемент будет располагаться к началу контейнера.

.container {
  display: flex;
}

.item:first-child {
  order: 2;
}

.item:last-child {
  order: 1;
}

Нюансы использования

• Свойство flex работает только для элементов, у которых значение свойства display установлено на flex.
• Если элементы не помещаются в одну строку или колонку из-за ограничений ширины или высоты контейнера, используется свойство flex-wrap со значением wrap, чтобы элементы переносились на новую строку или колонку.
• Расположение элементов в HTML-файле не имеет решающего значения. Порядок элементов можно поменять в CSS.
• Если нужно задать порядок отображения элементов, можно использовать свойство order, где меньшее значение будет помещать элемент ближе к началу контейнера.
• Множество языков в мире используют написание справа налево rtl (right-to-left), в отличие от привычного ltr (left-to-right). Флекс адаптирован для этого. В нем есть понятие начала и конца, поэтому в браузерах с локалью rtl все элементы будут автоматически расположены в реверсном порядке.

Материалы по теме

• Как изменить ширину элемента. Свойство width
• Как передвинуть элемент на странице. CSS-свойство position
• Флексы для начинающих

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.