🔥 Марафон «Основы веб-разработки»

Участие бесплатное, но необходимо зарегистрироваться:

https://frontendblok.com/marathons/we...

Шпаргалка по Flexbox CSS — https://tpverstak.ru/flex-cheatsheet/

Шпаргалка по Grid CSS — https://tpverstak.ru/grid/

Игра Grid CSS — http://cssgridgarden.com/#ru

Задать вопрос фронтендеру бесплатно — https://frontendhelp.me/ru

Примеры с видео:

Float Left — https://codepen.io/anna_blok/pen/WaZgwg

Float & Clear — https://codepen.io/anna_blok/pen/bmoxBj

Flexbox & Float — https://codepen.io/anna_blok/pen/vVezxZ

Grid CSS — https://codepen.io/anna_blok/pen/dgZoXm

✅ Instagram — https://www.instagram.com/annblok/

✅ TikTok — https://www.tiktok.com/@annblok_webdev

✅ Сайт — http://tpverstak.ru

✅ ВК — https://vk.com/tpverstak

✅ Telegram — https://t.me/tpverstak

✅ Чат Telegram — https://t.me/tpverstakchat

================================================================================

display

• flex
• inline-flex

Здесь текст

.parent {
  display: flex;
}

• р усский
• english

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

Применяется ко: всем элементам.

flex

Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.

inline-flex

Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.

flex-direction

• row
• row-reverse
• column
• column-reverse

.parent {
  display: flex;
  flex-direction: row;
  height: 100%;
}

• р усский
• english

Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

Применяется к: flex контейнерам.

row

Главная ось направлена так же, как и ориентация текста, по умолчанию слева направо. Если значение dir задано как rtl, то направление оси идёт справа налево.

row-reverse

Похоже на значение row, но меняются местами начальная и конечная точки и главная ось направлена справа налево. Если значение dir задано как rtl, то направление оси идёт слева направо.

column

Главная ось располагается вертикально и направлена сверху вниз.

column-reverse

Главная ось располагается вертикально, но меняется положение начальной и конечной точек и ось направлена снизу вверх.

flex-wrap

• nowrap
• wrap
• wrap-reverse

.parent {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  height: 100%;
}
.child {
  width: 40%;
}

• р усский
• english

Свойство flex-wrap Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

Применяется к: flex контейнерам.

Значение по умолчанию: nowrap.

nowrap

Флексы выстраиваются в одну линию.

wrap

Флексы выстраиваются в несколько строк, их направление задаётся свойством flex-direction.

wrap-reverse

Флексы выстраиваются в несколько строк, в направлении, противоположном flex-direction.

flex-flow

• row nowrap
• column-reverse
• column wrap
• row-reverse wrap-reverse

.parent {
  display: flex;
  flex-flow: row nowrap;
  height: 100%;
}
.child {
  width: 40%;
  height: 40%;
}

• р усский
• english

Свойство flex-flow является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

Применяется к: flex контейнерам.

Значение по умолчанию: row nowrap.

order

• -1
• 0
• 1

.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}
.child-active {
  order: -1;
}

• р усский
• english

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

Применяется к: flex элементам.

Значение по умолчанию: 0.

justify-content

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly

.parent {
  display: flex;
  justify-content: flex-start;
  height: 100%;
}

• р усский
• english

Свойство justify-content определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

Применяется к: flex контейнерам.

Значение по умолчанию: flex-start.

flex-start

Флексы прижаты к началу строки.

flex-end

Флексы прижаты к концу строки.

center

Флексы выравниваются по центру строки.

space-between

Флексы равномерно распределяются по всей строке. Первый и последний элемент прижимаются к соответствующим краям контейнера.

space-around

Флексы равномерно распределяются по всей строке. Пустое пространство перед первым и после последнего элементов равно половине пространства между двумя соседними элементами.

space-evenly

Флексы распределяются так, что расстояние между любыми двумя соседними элементами, а также перед первым и после последнего, было одинаковым.

align-items

• flex-start
• flex-end
• center
• baseline
• stretch

.parent {
  display: flex;
  align-items: flex-start;
  height: 100%;
}

• р усский
• english

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

Применяется к: flex контейнерам.

Значение по умолчанию: stretch.

flex-start

Флексы выравниваются в начале поперечной оси контейнера.

flex-end

Флексы выравниваются в конце поперечной оси контейнера.

center

Флексы выравниваются по линии поперечной оси.

baseline

Флексы выравниваются по их базовой линии.

Stretch

Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

align-self

• flex-start
• flex-end
• center
• baseline
• stretch

.parent {
display: flex;
  height: 100%;
}
.child-active {
  align-self: flex-start;
}

• р усский
• english

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

Применяется кo: flex элементам.

Значение по умолчанию: auto.

flex-start

Элемент выравнивается в начале поперечной оси контейнера.

flex-end

Элемент выравнивается в конце поперечной оси контейнера.

center

Элемент выравнивается по центральной линии на поперечной оси.

baseline

Элемент выравнивается по базовой линии текста.

Stretch

Элемент растягивается таким образом, чтобы занять всё свободное пространство контейнера по поперечной оси.

align-content

• flex-start
• flex-end
• center
• space-between
• space-around
• space-evenly
• stretch

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: 100%;
}
.child {
  width: 30%;
}

• р усский
• english

Свойство align-content задаёт тип выравнивания строк внутри flex контейнера по поперечной оси при наличии свободного пространства.

Применяется к: flex контейнеру.

Значение по умолчанию: stretch.

flex-start

Строки располагаются в начале поперечной оси. Каждая следующая строка идёт вровень с предыдущей.

flex-end

Строки располагаются начиная с конца поперечной оси. Каждая предыдущая строка идёт вровень со следующей.

center

Строки располагаются по центру контейнера.

space-between

Строки равномерно распределяются в контейнере и расстояние между ними одинаково.

space-around

Строки равномерно распределяются таким образом, чтобы пространство между двумя соседними строками было одинаковым. Пустое пространство перед первой строкой и после последней строки равно половине пространства между двумя соседними строками.

space-evenly

Строки распределяются равномерно. Пустое пространство перед первой строкой и после последней строки имеет ту же ширину, что и у других строк.

stretch

Строки равномерно растягиваются, заполняя свободное пространство.

flex-grow

• 0
• 1

.parent {
  display: flex;
  height: 100%;
}
.child-active {
  flex-grow: 0;
}

• р усский
• english

Свойство flex-grow задает коэффициент роста flex для заданного числа . Отрицательное значение не валидно.

Применяется к: flex элементам.

Значение по умолчанию: 0.

flex-shrink

• 0
• 1

.parent {
display: flex;
  height: 100%;
}
.child {
  width: 40%;
}
.child-active {
  flex-shrink: 0;
}

• р усский
• english

Свойство flex-shrink задает коэффициент сжатия flex с заданным числом . Отрицательное значение не валидно.

Применяется к: flex элементам.

Значение по умолчанию: 1.

flex-basis

• 30%
• 50%
• content

.parent {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  height: 100%;
}
.child-active {
  flex-basis: 30%;
}

• р усский
• english

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

Применяется к: flex элементам.

Значение по умолчанию: auto.