Flexbox - The Ultimate CSS Flex Cheatsheet (с анимирани диаграми!)

Тази изчерпателна таблица за CSS flexbox ще покрие всичко, което трябва да знаете, за да започнете да използвате flexbox във вашите уеб проекти.

Оформлението на CSS flexbox ви позволява лесно да форматирате HTML. Flexbox улеснява подравняването на елементите вертикално и хоризонтално с помощта на редове и колони. Елементите ще се „огънат“ до различни размери, за да запълнят пространството. Улеснява отзивчивия дизайн.

CSS flexbox е чудесен за използване за общото оформление на вашия уебсайт или приложение. Лесно е да се научи, поддържа се във всички съвременни браузъри и не отнема толкова време, за да разберете основите. До края на това ръководство ще сте готови да започнете да използвате flexbox във вашите уеб проекти.

Статията включва полезни анимирани gifs от Scott Domes, които ще направят flexbox още по-лесни за разбиране и визуализиране.

Всички свойства на CSS Flexbox

Ето списък на всички свойства на CSbox flexbox, които могат да се използват за позициониране на елементи в CSS. След това ще видите как работят.

CSS, който може да се приложи към контейнера

display: flexbox | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: nowrap | wrap | wrap-reverse; flex-flow:  ||  justify-content: flex-start | flex-end | center | space-between | space-around; align-items: flex-start | flex-end | center | baseline | stretch; align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS, който може да се приложи към елементи / елементи в контейнера

order: ; flex-grow: ; /* default 0 */ flex-shrink: ; /* default 1 */ flex-basis:  | auto; /* default auto */ flex: none | [  ? ||  ] align-self: auto | flex-start | flex-end | center | baseline | stretch;

Терминология

Преди да научите какво правят свойствата на flexbox, важно е да разберете свързаната терминология. Ето дефинициите на ключовите термини на flexbox, взети от официалната спецификация на W3C за flexbox.

  • основна ос : Основната ос на гъвкав контейнер е основната ос, по която са разположени гъвкавите елементи. Посоката се базира на свойството flex-direction.
  • главен старт | основен край :Флекс елементите се поставят в контейнера, започвайки от страната на главния старт и вървяйки към страната на главния край.
  • основен размер : Ширината или височината на гъвкав контейнер или гъвкав елемент, който и да е в основното измерение, е основният размер на тази кутия. По този начин неговото основно свойство за размер е или неговото свойство за ширина или височина, което от двете е в основното измерение.
  • напречна ос : Оста, перпендикулярна на главната ос, се нарича напречна ос. Посоката му зависи от посоката на главната ос.
  • кръстосан старт | напречен край : Гъвкавите линии се пълнят с предмети и се поставят в контейнера, започвайки от страната на напречния старт на гъвкавия контейнер и преминавайки към страната на напречния край.
  • кръстосан размер : Ширината или височината на гъвкавия елемент, който и да е в кръстосания размер, е кръстосаният размер на елемента. Свойството на кръстосания размер е това, което от „ширина“ или „височина“ е в напречното измерение.

CSS Display Flex

display: flex is казва на вашия браузър, "Искам да използвам flexbox с този контейнер, моля."

А divелемент по подразбиране display:block. Елемент с тази настройка на дисплея заема цялата ширина на линията, на която се намира. Ето пример за четири цветни div в родителски div с настройката на дисплея по подразбиране:

За да използвате flexbox в раздел на вашата страница, първо конвертирайте родителския контейнер в flex контейнер, като добавите display: flex;към CSS на родителския контейнер.

Това ще инициализира този контейнер като гъвкав контейнер и ще приложи някои свойства по подразбиране.

Flex посока

flex-directionви позволява да контролирате как елементите в контейнера се показват. Искате ли ги отляво надясно, отдясно наляво, отгоре надолу или отдолу нагоре? Можете да направите всичко това лесно, като настроите flex-directionконтейнера.

Подредбата по подразбиране след прилагане display: flexе елементите да бъдат подредени по главната ос отляво надясно. Анимацията по-долу показва какво се случва, когато flex-direction: columnсе добави към елемента контейнер.

Можете също да зададете flex-directionкъм row-reverseи column-reverse.

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

justify-contentе свойство за подравняване на елементи в контейнера по главната ос (вижте терминологичната схема по-горе). Това се променя в зависимост от начина на показване на съдържанието. Позволява ни да запълним всяко празно пространство в редовете и да дефинираме как искаме да го „оправдаем“.

Тук са нашите най-често срещаните варианти, използвани, за да оправдае съдържание: flex-start | flex-end | center | space-between | space-around.

Ето как изглеждат различните опции:

space-betweenразпределя елементи, така че първият елемент да е на ниво с началото, а последният да е на ниво с края. space-aroundе подобно, но елементите имат половин размер пространство от двата края.

Flex Align Items

align-itemsни позволява да подравняваме елементи по напречната ос (вижте терминологичната диаграма по-горе). Това позволява на съдържанието да се позиционира по много различни начини, като се използва обосновано съдържание и се подравняват елементи заедно.

Ето най-често срещаните опции, използвани за подравняване на елементи: flex-start | flex-end | center | baseline | stretch

За stretchда работи така, както бихте очаквали, височината на елементите трябва да бъде зададена autoвместо определена височина.

Тази анимация показва как изглеждат опциите:

Сега ще използваме и двете, justify-contentи align-items. Това ще покаже разликата между основните оси и напречните оси.

Подравнете себе си

align-self ви позволява да регулирате подравняването на един елемент.

Той има всички същите свойства на align-items.

In the following animation, the parent div has the CSS align-items: center and flex-direction: row. The first two squares cycle through different align-self values.

Flex Wrap

Flexbox by default will try to fit all elements into one row. However, you can change this with the flex-wrap property. There are three values you can use to determine when elements go to another row.

The default value is flex-wrap: nowrap. This will cause everything to stay in one row from left to right.

flex-wrap: wrap  will allow items to pop to the next row if there is not enough room on the first row. The items will be displayed from left to right.

flex-wrap: wrap-reverse also allows items to pop to the next row but this time the items are displayed from right to left.

Flex Flow

flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;

Align Content

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Vertically Centering with Flexbox

If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:

.parent { display: flex; align-items: center; }

Games and Apps

If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

  • Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
  • Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
  • Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
  • Flexbox Patters is a website that shows off a bunch of Flexbox examples.

Conclusion

We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.