Учебник CSS Flexbox со шпаргалкой о свойствах Flexbox 🎖️

В этой статье я научу вас CSS Flexbox основы для создания собственных адаптивных сайтов. Я объясню, как работает каждое из свойств Flexbox, и дам вам шпаргалку, охватывающую все, что вы можете делать с Flexbox. Давай 🎖️

Вы также можете просмотреть это руководство на YouTube, если хотите:

Кадр-4-2-

Когда вы строите дом, вам нужен проект. Так же, когда мы создаем сайты, нам нужен план. И Flexbox – это план.

Модель Flexbox позволяет нам макетировать содержимое наш веб-сайт. Более того, это помогает нам создавать структуры. необходимые для создания адаптивные веб-сайты для нескольких устройств.

Вот демонстрация, которую я создал, используя Flexbox в качестве основного плана.

Кадр-35-1

Этот проект является частью данной статьи.

Итак, как работает архитектура Flexbox? Гибкие элементы [Contents] распределяются вдоль главной и поперечной оси. И в зависимости от свойства flex-direction положение макета изменяется между строками и столбцами.

Архитектура модели Flex Box

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

Диаграмма значений свойства Flex Box
Альтернативный текст

Для этого проекта вам нужно немного знать HTML, CSS и как работать с кодом VS. Следуйте вместе со мной, пока мы выполним следующие задачи:

  1. Создайте папку под названием «Проект-1» и откройте VS Code
  2. Создайте index.html и style.css файлы
  3. Установите Live Server и запустите его.

Или вы можете просто открыть Codepen и начать кодировку.

В конце этого урока вы можете создать точные и красивые макеты веб-сайтов.

HTML

В HTML напишите эти строки кода внутри тега body 👇

<div class="container">
    <div class="box-1"> A </div>
    <div class="box-2"> B </div>
    <div class="box-3"> C </div>
</div>

CSS

Цель на .container класс и все коробки. Затем оформите коробки так, чтобы все они выглядели похожими, например: 👇

Примечание: не забудьте указать высоту емкости.

.container{
   height : 100vh;
}

[class ^="box-"]{
    width: 140px;
    height: 140px;
    background-color: skyblue;
    border: 2px solid black;

// To view the letter better
    font-size: 65px;
}

Но подождите.

Альтернативный текст

Прежде чем начать вам нужно понять взаимосвязь между родительскими и дочерними классами.

Альтернативный текст

Flexbox работает на родительский класса не на детских упражнениях.

Вот, .container класс это родительский и наши .box-* классы наши детей.

Итак, примените дисплей: flex внутри .container класс. И расположите буквы в центре поля так:

.container{
    display : flex;
    height : 100vh;

// To place some gap between boxes
    gap : 25px;
}
[class ^="box-"]{
// Code from previous step are here

// Placing text at center 
    display : flex;
    justify-content : center;
    align-items : center;
}

И… мы все готовы! Приступаем к кодировке. 😊

Альтернативный текст

Это свойство позволяет нам задать направление и ориентацию, в которой наши flex-элементы должны быть распределены внутри flex-контейнера.

Гибкое направление
Гибкое направление

Чтобы воспроизвести эти результаты, давайте напишем эти строки в нашем CSS:

Пожалуйста, запиши что мы запишем их внутри .container класс.

.container{
//code from setup stage are here

// Change the value  👇 here to see results
    flex-direction : row;
}

Это свойство располагает гибкими элементами вдоль ГЛАВНАЯ ВОТ внутри flex-контейнера.

обосновать содержание
обосновать содержание

Чтобы воспроизвести эти результаты, напишите эти строки в CSS:

.container{
//code from setup stage are here

//  Change the value  👇 here to see results
    justify-content: flex-start;
}

Это свойство располагает гибкими элементами вдоль ПЕРЕХРЕНА ВОТ внутри flex-контейнера. Это похоже на justify-content.

выровнять содержимое
выровнять содержимое

Обратите внимание, что без flex-wrap собственности, это свойство не работает. Вот демо:

.container{

//  Change the value  👇 here to see results
    align-content: center;

// without this line, align-content won't work
    flex-wrap: wrap;
}

Это свойство распределяет Flex-элементы вдоль Поперечная ось.

выровнять элементы

Чтобы воспроизвести эти результаты, давайте напишем следующий код в CSS:

.container{
//code from setup stage are here

// Change the value 👇 here to see results
    align-items: flex-end;
}

Это свойство работает на дочерних классах. Он разместит выбранный элемент вдоль Поперечная ось.

выровнять себя

Всего есть 6 значений:

  • гибкий старт
  • flex-end
  • центр
  • базовая линия
  • растянуть
  • авто

Чтобы воспроизвести результаты, выберите любой .box-* и напишите следующий код:

.box-2{
// Change the value 👇 here to see results
     align-self : center;
}

Отдохни

Всё идет нормально. Отдохни!

Рама-45

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

flex-grow

Это свойство увеличивает размер flex-элемента на основе ширины flex-контейнера.

flex-shrink

Это свойство помогает сжать элемент flex в зависимости от ширины flex-контейнера. Это противоположность flex-grow.

flex grow flex shrink flex wrap

Чтобы добиться этих результатов, следите за мной.

Пожалуйста, запиши что flex-grow и flex-shrink работают на дочерних классах. Итак, мы будем ориентироваться на все наши боксы следующим образом:

.box-1{
    flex-grow: 1;
}
.box-2{
    flex-grow: 5;
}
.box-1{
    flex-grow: 1;
}

Измените размер окна и вы увидите результаты.

Чтобы скопировать результат flex-shrink, напишите следующий код:

Пожалуйста, запиши что вам сначала нужно удалить свойство flex-wrap, иначе оно не будет работать.

.box-1{
    flex-shrink: 1;
}
.box-2{
    flex-shrink: 5;
}
.box-1{
    flex-shrink: 1;
}

Теперь измените размер окна и вы увидите результаты.

flex-wrap

Это свойство помогает вам установить необходимое количество flex-элементов в строке или строке.

flex wrap flex grow flex shrink

Это работает на .container родительский класс. Итак, напишите следующий код:

.container{
    //other codes are here 
  
// Change value 👇 here to see results
    flex-wrap : wrap;

flex-основа

Это похоже на добавление ширины к flex-элементу, но только более гибко. flex-basis: например, 10em установит начальный размер flex-элемента равным 10em. Его окончательный размер будет зависеть от доступного пространства, flex-grow и flex-shrink.

Альтернативный текст

flex сокращение

Это сокращение для flex-grow, flex-shrink и flex-основа свойства комбинированные.

flex flex основа

Вы можете попробовать это, написав следующий код:

Пожалуйста, запиши что он работает только на дочерних классах:

.box-2{
    flex : 2 1 30em;
}

flex-flow

Это сокращение для flex-direction и flex-wrap свойства:

Альтернативный текст

Вы можете попробовать это, написав следующий код:

Пожалуйста, запиши что он работает только на родительском классе.

.container{
    flex-flow : row wrap;
}

место-содержимое

Это сокращение свойств justify-content и align-content:

Альтернативный текст

Продублируем результаты:

Пожалуйста, запиши что он работает на родительском классе.

.container{
    place-content : center flex-end;
}

Больше ресурсов

Если хочешь упражнение Ваши знания Flexbox, вы можете прочитать эту мою статью там, где вы будете создание пяти адаптивных макетов с помощью Flexbox. Вот демо:

Кадр-5--2--1

Вот ваша медаль, чтобы дочитать до конца ❤️

Предложения и критика очень ценятся ❤️

Альтернативный текст

YouTube / Джой Шахеб

Twitter / JoyShaheb

Instagram / JoyShaheb

Кредиты

* стая единорогов, Kitty Avatars

* кот-1, кот-2, собака, кролик

* Астронавт, чашка единорога, радужный кот

* Трюки CSS

Кредиты

Добавить комментарий

Ваш адрес email не будет опубликован.