Основы флексбокса

Сегодня я вернулся ко второму строительному блоку в CSS: Flexbox! Он был создан в 2009 году для облегчения динамических макетов.

Впервые я познакомился с этими концепциями на курсе General Assembly Software Engineering Immersive несколько недель назад. С тех пор я выполнил несколько лабораторных работ и проектов с их использованием. 👩💻

Но самым сильным впечатлением было то, что я много раз играл и переигрывал в Flexbox Froggy & Flexbox Zombies. Каждый раз, когда я переигрывал эти игры, я открывал для себя новое понимание, на которое раньше не обращал внимания, и концепции закреплялись.

Я знаю, что эти игры выглядят глупо, но, по правде говоря, они (без каламбура) меняют ваш опыт обучения 🪄.

Содержание
  1. Часть 1 Настройка Flexbox
  2. Часть 2 Свойства выравнивания
  3. 2.1 flex-direction
  4. Назначение
  5. Значение по умолчанию
  6. Значения
  7. 2.2 justify-content
  8. Назначение
  9. Значение по умолчанию
  10. Значения
  11. 2.3 align-items
  12. Назначение
  13. Значение по умолчанию
  14. Значения
  15. 2.4 order
  16. Назначение
  17. Применение
  18. Значение по умолчанию
  19. Значения
  20. 2.5 align-self
  21. Назначение
  22. Применение
  23. Значения
  24. 2.6 flex-wrap
  25. Назначение
  26. Значение по умолчанию
  27. Значения
  28. 2.7 align-content
  29. Назначение
  30. Применение
  31. Значения
  32. align-content vs align-items
  33. Часть 3 Скорость изменения размеров
  34. 3.1 Выравнивание против свойств изменения размера
  35. 3.2 flex-grow
  36. Взаимодействие с другими свойствами
  37. Назначение
  38. Применение
  39. Значение по умолчанию
  40. Значения
  41. Пример
  42. 3.2 flex-shrink
  43. Назначение
  44. Значение по умолчанию
  45. Значения
  46. Применение
  47. Усадка и рост
  48. 3.3 flex-basis
  49. Назначение
  50. Значение по умолчанию
  51. Значения
  52. Применение
  53. Взаимодействие с другими свойствами
  54. Часть 4 Свойства сокращений
  55. 4.1 flex-flow
  56. Назначение
  57. Значения
  58. Пример
  59. 4.2 flex
  60. Назначение
  61. Значения по умолчанию
  62. Значения: Ярлыки ключевых слов
  63. Пример
  64. Внимание

Часть 1 Настройка Flexbox

Чтобы начать использовать магию Flexbox, мы должны установить соответствующие контейнеры, добавив дополнительные <div> в наш HTML.

В нашем CSS-файле мы выбираем <div> по классу, который мы ему присвоили, и применяем display: flex.

Затем мы можем начать использовать следующие свойства для назначения элементов, вложенных непосредственно в контейнер…

Часть 2 Свойства выравнивания

Применяется расположение
= Эти свойства & их соответствующие значения применяются на уровне контейнера
Назначение
= Они влияют на расстояние между элементами и их расположение внутри контейнера.

2.1 flex-direction

Назначение

= Определяет направление расположения элементов в контейнере.

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

= row (Подобно эффекту display: inline)
—> Элементы вложены непосредственно в контейнер: Заполняются вдоль оси x

Значения

2.2 justify-content

Назначение

—> row
= Промежуток вдоль оси x
—> column
= Расстояние вдоль оси y

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

= flex-start

Значения

  1. flex-start
    —> Если flex-direction: row
    = Элементы размещаются заподлицо с левой частью контейнера
    —> Если flex-direction: column
    = Элементы размещены заподлицо с верхней частью контейнера

  2. flex-end
    —> Если flex-direction: row
    = Элементы размещены заподлицо с правой частью контейнера
    —> Если flex-direction: column
    = Элементы размещены заподлицо с нижней частью контейнера

  3. center
    —> Если flex-direction: row
    = Элементы упакованы заподлицо друг с другом & размещены в середине контейнера по оси y
    —> Если flex-direction: column
    = Элементы упакованы заподлицо друг с другом & помещены в середину оси x контейнера

  4. space-between
    —> Если flex-direction: row
    = Разделяет оставшееся пространство контейнера по оси x, добавляет равное количество между элементами
    —> Если flex-direction: column
    = Делит оставшееся пространство контейнера по оси y, добавляет равное количество между элементами

  5. space-around
    —> Если flex-direction: row
    = Делит оставшееся пространство контейнера по оси x, добавляет равное количество по обе стороны каждого элемента
    —> Если flex-direction: column
    = делит оставшееся пространство контейнера по оси y, добавляет равное количество вокруг обеих сторон каждого элемента.

2.3 align-items

Назначение

—> row = Расстояние вдоль оси y
—> column = расстояние по оси x

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

= flex-start

Значения

  1. flex-start
    —> Если flex-direction: row
    = Элементы заподлицо с верхом контейнера
    —> Если flex-direction: column
    = Элементы заподлицо с левой частью контейнера

  2. baseline
    1/ Нацеливается на самый высокий элемент
    2/ Выравнивает самый верхний/самый левый край (строки/столбца) самого высокого элемента с самым верхним/самым левым (строки/столбца) краем контейнера
    3/ Выравнивает базовую линию остальных элементов с базовой линией самого высокого элемента.

Что такое базовая линия?

= Где «сидят» буквы
—> Окончания букв простираются ниже базовой линии

Пример использования

= Размер содержимого варьируется между элементами
—> Если размер содержимого одинаковый, то базовая линия: Тот же эффект, что и flex-start

  1. flex-end
    —> row
    = Выравнивание элементов заподлицо справа от контейнера
    —> column
    = Выравнивание элементов заподлицо с нижней частью контейнера

  2. center
    —> row
    = Элементы упакованы заподлицо друг с другом & размещены в середине оси x контейнера
    —> column
    = Элементы, упакованные заподлицо друг с другом & размещенные в середине контейнера по оси y

  3. stretch
    —> row
    = Выравнивает верх & низ элемента вровень с верхом & низом контейнера путем растягивания всего элемента
    —> column
    = Выравнивает левую & правую часть элемента заподлицо с левой & правой частью контейнера, растягивая весь элемент.

2.4 order

Назначение

= Поменять положение элемента в группе элементов.

Применение

= К отдельному элементу

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

= 0

Значения

= Может быть положительным или отрицательным
Влияние значений

  1. Значение по умолчанию для любого элемента: 0
  2. Элемент с положительным значением order = Немедленно перемещается назад
  3. Элемент с отрицательным значением order = Немедленно перемещен на передний планПричина= order Значения, установленные для элементов —> Расположите элементы в хронологическом порядке (от отрицательных значений к положительным)

2.5 align-self

Назначение

—> row
= Выравнивание отдельного элемента по оси y контейнера
—> column
= Выравнивание отдельного элемента по оси x контейнера

Применение

= К определенному элементу

Значения

= То же, что и `align-items

2.6 flex-wrap

Назначение

= Создать больше пространства для элементов
—> Предоставляя им пространство за пределами их текущей линии
—> Позволяя элементам сохранять размер.

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

= nowrap
—> Сжимает элементы, чтобы они поместились в линию.

Значения

1 . nowrap
= Уместить все элементы в 1 строку
—> Даже если это означает их уменьшение.

2.7 align-content

Назначение

= Расстановка & Позиционирование «линий»/»групп» элементов
—> Принимает & манипулирует каждой «линией» так же, как align-items принимает каждый «элемент».

Применение

= Применяется с flex-wrap: wrap
—> Без flex-wrap: wrap, align-content не имеет эффекта

Значения

  1. flex-start
    —> Если flex-direction: row
    = Линии заподлицо с верхом контейнера
    —> Если flex-direction: column
    = Линии заподлицо с левой частью контейнера

  2. flex-end
    —> Если flex-direction: row
    = Элементы заподлицо с дном контейнера
    —> Если flex-direction: column
    = Элементы заподлицо с правой частью контейнера

  3. center
    —> row
    = Линии, упакованные заподлицо друг с & размещены в середине оси x контейнера
    —> column
    = Линии, упакованные заподлицо друг с другом & размещенные в середине контейнера по оси y

  4. space-between
    —> Если flex-direction: row
    = Разделяет оставшееся пространство по оси y контейнера, добавляет равное количество между строками
    —> Если flex-direction: column
    = Делит оставшееся пространство контейнера по оси x, добавляет равное количество между строками

  5. space-around
    —> Если flex-direction: row
    = Разделяет оставшееся пространство контейнера по оси y, добавляет равное количество по обе стороны каждой строки
    —> Если flex-direction: column
    = делит оставшееся пространство контейнера по оси x, добавляет равное количество по обе стороны каждой линии

  6. stretch
    —> row
    = Выравнивает верх и низ строки заподлицо с верхом и низом контейнера, растягивая каждую строку целиком
    —> column
    = Выравнивает левую & правую часть строки заподлицо с левой & правой частью контейнера, растягивая каждую строку.

align-content vs align-items

= align-content: Расстановка & позиционирование строк элементов
= align-items: интервал и позиционирование отдельных элементов

Часть 3 Скорость изменения размеров

3.1 Выравнивание против свойств изменения размера

= Во всех случаях Flexbox создается на контейнере.
Но…
—> Свойства выравнивания: Применяются при выборе контейнера в CSS
—> Свойства изменения размера: Применяются при выборе самих элементов в CSS

3.2 flex-grow

Взаимодействие с другими свойствами

= Обнуляет любой эффект от justify-content
—> Если нет новых строк.

Назначение

= Увеличить элемент(ы), чтобы заполнить все доступное пространство
—> Работает одинаково для горизонтального (flex-direction: row) и вертикального (flex-direction: column) пространства.

Применение

= Непосредственно на элементах
—> Не на контейнере элементов

  1. Примените flex-grow: 1 к классу со всеми похожими элементами
  2. Отменить рост для определенных элементов, которые не растут = flex-grow: 0
  3. Корректировать коэффициенты для определенных элементов, растущих быстрее = flex-grow: 3 —> Растет в 3 раза быстрее, чем любой другой элемент/ flex-grow: 1

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

= 0
—> Не будет расти, если ему не прикажут.

Значения

= Соотношения
—> Установите 2 элемента flex-grow: 1 = Оба растут, заполняя доступное пространство с одинаковой скоростью.

Пример

—> Установить, что 1 элемент растет в 2 раза быстрее другого элемента
= flex-grow: 2, flex-grow: 1
= скорость в 2 раза больше, а не в 2 раза больше: оба элемента растут, чтобы заполнить свободное пространство.

3.2 flex-shrink

Назначение

= Реагировать, когда не хватает места для элементов.

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

= 1
—> Сжимает без явного задания значений

Значения

= Коэффициенты
—> Используется для управления скоростью уменьшения каждого элемента (Скорость).

Применение

= Элементы уменьшаются со скоростью относительно друг друга

  1. Все элементы уменьшаются с одинаковой скоростью = Не устанавливайте flex-shrink: Это покрывается значением по умолчанию
  2. Некоторые элементы уменьшаются в 2 раза быстрее= flex-shrink: 2—> Уменьшение в два раза быстрее, чем скорость, а не размер—> На каждый 1 пиксель, эти элементы уменьшаются на 2 пикселя каждый
  3. Отказаться от уменьшения = flex-shrink: 0—> Указано для отдельного элемента

Усадка и рост

= Могут использоваться в комбинации
—> По умолчанию: Применять flex-grow = Используется с flex-shrink: 1
= Будет расти и сжиматься в зависимости от наличия дополнительного пространства || отсутствия пространства
—> Если нужно, чтобы элементы сжимались с той же скоростью, что и росли.
= Только установить flex-grow: B/c flex-shrink уже установлен в 1 по умолчанию.

3.3 flex-basis

Назначение

= Начальная точка/идеальный мир (до любого роста или сжатия)
—> Достаточное пространство для размещения flex-basis определенного элемента: Элемент принимает размер, определенный flex-basis
—> Недостаточно места для размещения flex-basis defined: Элемент принимает только тот размер, который разрешен пространством.

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

= auto
—> То же, что и значение width.

Значения

Единицы измерения:

  1. Пиксели
  2. ПроцентыПример: flex-basis: 50%= Занимает 50% ширины контейнера

Применение

—> flex-direction: row
= flex-basis занимает 50% ширины контейнера
—> flex-direction: column
= flex-basis определяет высоту

Окончательные flex-basis вкладчики
  1. width/height
    = Если указано flex-basis
    —> width: Переопределена & Игнорируется

  2. min-width/min-height
    = Нижний предел для flex-basis.
    Пример: min-width: 300px/min-height: 300px && flex-basis: 100px
    —> Конечная flex-basis = 300px (min-width)

Пример: min-width/min-height > flex-basis set
—> Final flex-basis = min-width/min-height

Порядок переопределения

min/max-width/height > flex-basis > width/height

Взаимодействие с другими свойствами

  1. flex-basis: 0
    = Не будет показывать элемент, если не установлено flex-grow
    —> Размер устанавливается на 0, пока не начнется рост

  2. flex-shrink: 0
    = Не позволяет Элементу уменьшаться до размера flex-basis.

  3. flex-grow не обязательно указывать
    = Если flex-basis > Текущие width/height
    && Элементу не нужно расти за пределы размера flex-basis
    —> flex-basis иногда можно перепутать с flex-grow.

  4. Доступное пространство не позволяет использовать размер flex-basis
    = Элемент уменьшается в соответствии с flex-shrink/default shrinking

  5. Доступное пространство увеличивается && Элемент задал flex-grow
    = Элемент увеличивается за пределы размера flex-basis.
    Пример: flex-basis: 200px && flex-grow: 1

Часть 4 Свойства сокращений

4.1 flex-flow

Назначение

= Комбинирует flex-direction & flex-wrap.

Значения

= Значения flex-direction & flex-wrap
—> Разделенные пробелом

Пример

flex-flow: row wrap
= Устанавливает строки & заворачивает их в дополнительные строки

4.2 flex

Назначение

= Объединяет 2 настройки: flex-grow, flex-shrink, & flex-basis.

Значения по умолчанию

  1. Отставить 3-е значение: flex-basis= flex-basis установлен на 0px по умолчанию —> (в отличие от того, как flex-basis установлен на auto по умолчанию без свойства flex)**.

Пример: flex: 1 0 auto = расти со скоростью 1, не уменьшаться, и использовать width как flex-basis.

  1. Отставить 2-е значение: flex-shrink= flex-shrink установлено на 1—> То же, что и обычное flex-shrink по умолчанию.

Пример: flex: 0 300px = Не увеличивать && flex-basis: 300px

  1. Отставить оба 2-ое && 3-е значения: flex-shrink & flex-basis= По умолчанию: flex-basis: 0px && flex-shrink: 1.

Пример: flex: 1; = Только устанавливает flex-grow: 1

Значения: Ярлыки ключевых слов

  1. flex: auto
    = flex-grow: 1, flex-shrink: 1, flex-basis: auto
    —> Увеличивается & Уменьшается & Сохраняет начальный размер = width

  2. flex: none
    = flex-grow: 0, flex-shrink: 0, flex-basis: auto
    —> Не увеличивать & Не уменьшать & Начальный размер = width.

Пример

= flex: 1 1 300px
—> flex: grow shrink basis

Внимание

= Установка flex без указания 3-го значения
—> Устанавливает flex-basis с auto на 0px.

…И это все для CSS Flexbox! Я буду возвращаться сюда, чтобы добавить дополнительные заметки и примеры использования после дальнейшего личного применения. Мне очень хочется продолжить делиться с вами своим опытом<3

На следующей неделе мы перейдем к CSS Grid, чтобы завершить CSS Essentials! 🤳

С любовью,
Анжелина

Оцените статью
devanswers.ru
Добавить комментарий