Bootstrap flexbox

Flexbox е нов начин на оформление в CSS3. Той описва начини за подравняване и оразмеряване на елементите.

Разбирането на начина, по който функционира Bootstrap 4 flex, ще ни помогне да подредим елементите хоризонтално и вертикално (наляво, в центъра и вдясно),  да ги оразмерим според съдържащия ги (родителски) елемент и да им укажем как да запълват реда.

Bootstrap 4 Flex контейнер

За да използваме флекс инструментите, необходимо е да имаме флекс контейнер. 
За целта имаме на разположение класовете:
.d-flex и .d-inline-flex
Можем да поставим флекс контейнер навсякъде в страницата, включително и в колона.

Клас .d-flex създава контейнер, който заема цялата ширина на своя родителски елемент.
Клас .d-inline-flex създава контейнер, чиято ширина варира в зависимост от неговото съдържание.

flex контейнери

Bootstrap 4 Flex елементи

Когато поставяме елементи във flex контейнера, те се подравняват в един ред, отляво надясно.

Подравняването на елементите хоризонтално има и допълнителен клас, наречен .flex-row. Препоръчително е да го използваме, защото ще помогне за по-добра четимост на кода, а също така и при задаване на прекъсвания за мобилни устройства.

За да подредим елементите от дясно на ляво, трябва да използваме класа .flex-row-reverse.

.flex-row-reverse

Можем да подредим елементите вертикално, използвайки класа .flex-column, или да обърнем подредбата посредством .flex-column-reverse.

.flex-column
.flex-column-reverse

Хоризонтално разполагане на елементите

  • .justify-content-start подравнява елементие в лявата част на контейнера
  • .justify-content-center поставя елементите в центъра на контейнера
  • .justify-content-end  подравнява елемнтите в дясната част на контейнера
  • .justify-content-between поставя разстояния между елементите и ги разполага равномерно в цялата ширина на контейнера
  • .justify-content-around  разполага елементите в контейнера, като оставя разстояния от двете им страни
Сменете мащаба (0.5х или 0.25х) за да видите резултата