Как работи Flexbox - обяснено с големи, цветни, анимирани gifs

Flexbox обещава да ни спаси от злините на обикновения CSS (като вертикално подравняване).

Е, Flexbox постига тази цел. Но овладяването на новия му умствен модел може да бъде предизвикателство.

Така че нека да разгледаме анимирано как работи Flexbox, за да можем да го използваме за изграждане на по-добри оформления.

Основният принцип на Flexbox е да направи оформленията гъвкави и интуитивни.

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

Всичко това звучи добре по принцип. Но нека да видим как изглежда на практика.

В тази статия ще се потопим в 5-те най-често срещани свойства на Flexbox. Ще проучим какво правят, как можете да ги използвате и как всъщност ще изглеждат техните резултати.

Свойство # 1: Дисплей: Flex

Ето нашата примерна уеб страница:

Имате четири цветни div с различни размери, съхранявани в сив div на контейнера. Към момента всеки div е по подразбиране display: block. По този начин всеки квадрат заема цялата ширина на линията си.

За да започнете с Flexbox, трябва да направите контейнера си в гъвкав контейнер . Това е толкова лесно, колкото:

#container { display: flex;}

Не се е променило много - вашите divs се показват вградени сега, но това е всичко. Но зад кулисите сте направили нещо мощно. Дадохте на квадратите си нещо, наречено гъвкав контекст .

Вече можете да започнете да ги позиционирате в този контекст с много по-малко трудности от традиционните CSS.

Свойство №2: Flex Direction

Контейнерът на Flexbox има две оси: основна ос и напречна ос , които по подразбиране изглеждат така:

По подразбиране елементите са подредени по главната ос отляво надясно . Ето защо вашите квадратчета по подразбиране са хоризонтални, след като сте приложили display: flex.

Flex-direction, обаче, нека въртите основната ос.

#container { display: flex; flex-direction: column;}

Тук трябва да се направи важно разграничение: flex-direction: columnне подравнява квадратите на напречната ос вместо основната ос. Това кара самата основна ос да преминава от хоризонтална към вертикална.

Има няколко други възможности за гъвкава посока, както и: ред-обратната и колонна обратно.

Свойство № 3: Обосновете съдържанието

Justify-content контролира начина, по който подравнявате елементите по основната ос.

Тук ще се потопите малко по-дълбоко в разграничаването на основната / напречната ос. Първо, да се върнем към flex-direction: row.

#container { display: flex; flex-direction: row; justify-content: flex-start;}

На ваше разположение са пет команди за използване на justify-content :

  1. Флекс старт
  2. Гъвкав край
  3. Център
  4. Пространство между
  5. Космос наоколо

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

Space-around поставя еднаква възглавница от двете страни на квадрата - което означава, че пространството между най-отдалечените квадрати и контейнера е наполовина по-малко от пространството между два квадрата (всеки квадрат допринася еднакво поле, което не се припокрива, като по този начин удвоява пространството).

Последна бележка: не забравяйте, че justify-content работи по главната ос , а flex-direction превключва основната ос . Това ще бъде важно, когато преминете към ...

Свойство # 4: Подравняване на елементи

Ако „получите“ оправдано съдържание, подравняването на елементите ще бъде много лесно.

Тъй като justify-content работи по главната ос, елементите за подравняване се прилагат към напречната ос.

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

След това, нека се потопим в командите align-items.

  1. гъвкав старт
  2. гъвкав край
  3. център
  4. опъвам, разтягам
  5. базова линия

Първите три са абсолютно същите като justify-content , така че тук няма нищо прекалено фантастично.

Следващите две обаче са малко по-различни.

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

(Обърнете внимание, че за align-items: stretch, трябваше да задам височината на квадратите на автоматично. В противен случай свойството височина ще замени участъка.)

За изходно ниво, имайте предвид, че ако премахнете етикетите на абзаца, вместо това той подравнява дъното на квадратчетата, както следва:

За да демонстрираме по-добре главната и кръстосаната ос, нека комбинираме елементи за оправдаване на съдържанието и подравняване и да видим как различно функционира центрирането за двете команди за гъвкаво посока:

С редиците квадратите са разположени по хоризонтална основна ос. С колона те падат по вертикална основна ос.

Дори ако квадратите са центрирани както вертикално, така и хоризонтално и в двата случая, двете не са взаимозаменяеми!

Имот # 5: Подравнете себе си

Align-self ви позволява ръчно да манипулирате подравняването на един конкретен елемент.

Това е основно замяна на елементите за подравняване за един квадрат. Всички свойства са едни и същи, въпреки че по подразбиране е автоматично , при което следва елементите за подравняване на контейнера.

#container { align-items: flex-start;}
.square#one { align-self: center;}// Only this square will be centered.

Нека да видим как изглежда това. Ще приложите align-self на два квадрата, а за останалите ще приложите align-items: centerи flex-direction: row.

Заключение

Въпреки че току-що надраскахме повърхността на Flexbox, тези команди трябва да са достатъчни, за да се справите с повечето основни подравнения - и да се подравните вертикално към съдържанието на сърцето си.

Ако искате да видите още уроци за GIF Flexbox или ако този урок ви е бил полезен, натиснете зеленото сърце по-долу или оставете коментар.

Благодаря за четенето!