В ведение в Flexbox

1.

В ведение в F lex box
Flexbox - это мощный инструмент CSS для создания гибких и
адаптивных макетов веб-страниц. Он предоставляет набор свойств
для управления размещением и поведением элементов внутри
контейнера.
by Mohammed R akhmatillayev

2.

Что такое Flexbox?
Гибкий макет
Простой в использовании
Flexbox позволяет создавать макеты, которые
Flexbox обладает относительно простым синтаксисом и
автоматически подстраиваются под размер экрана и
легко интегрируется в существующий CSS-код.
ориентацию устройства.

3.

Основ ные компоненты
F lex box
F lex-контейнер
F lex-элементы
Это родительский элемент,
Это дочерние элементы,
который содержит все
которые находятся внутри
элементы Flexbox.
Flex-контейнера.

4.

F lex-контейнер и его свойства
display: flex
Превращает элемент в Flex-контейнер.
flex-direction
Управляет направлением потока Flex-элементов.
flex-wrap
Определяет, должны ли Flex-элементы переноситься на новую строку, если они
не помещаются в контейнер.

5.

Гибкое расположение элементов
Flexbox позволяет легко выравнивать элементы по центру, распределять их
равномерно или создавать неравномерное распределение.
1
2
Можно создавать макеты, которые автоматически подстраиваются под размер окна
браузера, обеспечивая оптимальное отображение на разных устройствах.

6.

Вырав нивание элементов по оси X и Y
С помощью свойств justify-content и align-items
justify-content выравнивает элементы по оси X, а
можно выравнивать элементы Flexbox по
align-items - по оси Y.
горизонтали и вертикали.

7.

Изменение порядка
элементов
1
order
Устанавливает порядок элементов в Flex-контейнере, независимо
от их исходного HTML-порядка.

8.

Гибкость и масшт абируемость
flex-grow
1
Определяет, как Flex-элемент будет расти, если в контейнере есть
свободное пространство.
flex-s hrink
2
Определяет, как Flex-элемент будет сжиматься, если в
контейнере недостаточно места для всех элементов.

9.

Практические примеры использования

10.

Резюме и кл ючев ые
в ыводы
Flexbox - это мощный инструмент для создания адаптивных и
гибких макетов веб-страниц. Он предоставляет множество
возможностей для управления размещением и поведением
элементов, что делает его ценным инструментом для вебразработчиков.