Flexbox в CSS и HTML (учебное пособие) - создание адаптивных макетов.

Это тебя ждет в курсе по Flexbox в CSS и HTML.

Что такое макет Flexbox и почему его вообще стоит использовать?

Здесь создается проект, в котором затем будет вестись работа.

Я представляю здесь примерную структуру и интегрированные в VS-Code возможности отладки с инструментами MS Edge. Кроме того, в этом видео впервые активируется макет Flexbox и устанавливается направление.

Как можно равномерно или в определенной пропорции разделить место в макете Flexbox?

Небольшое упражнение, в котором нельзя обойтись без немного (простой) математики.

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

Дочерние элементы могут быть выровнены контейнером с помощью главной оси. Вот как это можно настроить.

Не только в контейнере можно настроить выравнивание всех дочерних элементов, с помощью align-self можно также настраивать это для отдельных элементов по-разному.

Небольшое упражнение по индивидуальной настройке с кубиком.

Не только вдоль поперечной оси можно выравнивать элементы в контейнере Flex, но и можно сделать многое по выравниванию вдоль главной оси. ;-)

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

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

На сколько элемент должен увеличиваться, когда доступно больше места, чем указано в flex-basis? Это можно настроить с помощью свойства flex-grow.

На сколько должен сжиматься элемент, если доступного места меньше, чем указано в flex-basis? Это можно настроить с помощью свойства flex-shrink.

Дочерние элементы могут не только уменьшаться, если места меньше, но и могут быть перенесены из контейнера. Как контролировать это с помощью flex-wrap, я покажу в этом видео.

flex-direction и flex-wrap могут быть объединены в свойстве flex-flow. Это имеет смысл даже тогда, когда нужно установить только flex-direction, поскольку flex-flow короче. ;-)

Задание по flex-wrap.

Иногда нужно создать пробел, чтобы не напрягать человеческий глаз. К счастью, существует свойство CSS gap, которое делает именно это для дочерних элементов контейнера Flex.

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

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

Очень часто бывает, что мы хотим центрировать элементы и особенно текст горизонтально и вертикально (!). Что было мучением до Flexbox, становится детским садом с Flexbox.

Кто не знает его, 3-колоночник? Если он также подгоняется под доступное место, то не так уж много осталось до адаптивного дизайна.

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

Очень часто приходится иметь дело с вложенными макетами, но с помощью гибкой компоновки даже они больше не представляют большой проблемы.

Теперь есть множество веб-клиентов чата, как песчинок в море, и с появлением чат-ботов на основе искусственного интеллекта их ещё больше. Но как можно реализовать чат с помощью Flexbox? Об этом я расскажу в этом видео.

Не позже с момента появления Веб 2.0 практически на каждом веб-сайте можно найти галерею. В этом видео я описываю, как такой макет, например, прекрасно может быть реализован с помощью Flexbox.

Теперь все должно быть понятно касательно Flexbox-макета. В заключение, я опишу, что вы должны были выучить, что вы еще можете сделать, и какие прекрасные возможности для CSS-макетов существуют.