CSS Layout

Flexbox Playground

Интерактивная песочница для изучения и визуализации Flexbox

Container

flex-direction

justify-content

align-items

flex-wrap

gap: 10px

height: 300px

Items (3)

Превью

CSS код

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 10px;
  height: 300px;
}

Шпаргалка

justify-content

Выравнивание по главной оси

align-items

Выравнивание по поперечной оси

flex-grow

Растягивание элемента (0 = нет)

flex-basis

Базовый размер до распределения