Bootstrap 4. Flex-властивості сітки.

Відео: Що таке зручна верстка? bootstrap? flexbox? сітка?

Відео: Flexbox - основи технології та ідеї зручною верстки по сітці

Всім привіт! У цій статті ми розглянемо, що таке flex-властивості сітки Bootstrap і як їх використовувати.

У попередніх статтях ми чітко ставили, скільки колонок повинно бути в ряду, проте, якщо ми цього вказувати не будемо, будуть використані flex-властивості сітки Bootstrap, і вона автоматично все розмістить, як треба. Давайте подивимося кілька прикладів:

class="Row"style="background: lightblue"gt; 
class="Col-md"gt;col-md 
class="Col-md"gt;col-md 
class="Col-md"gt;col-md

Тут у нас 3 ряди, кожен з яких буде розміром в 4 колонки. Оскільки ми не вказуємо точну ширину, то сітка зробить потрібні розрахунки за нас і приведе все колонки до одного розміру. Розглянемо ще один приклад:

class="Row"style="background: lightblue"gt; 
class="Col-md"gt;col-md 
class="Col-md-8"gt;col-md-8 
class="Col-md"gt;col-md

Тут ми вказали ширину тільки для одного ряду, отже, інші будуть вирахувані автоматично і будуть рівними один одному.

Відео: Уроки по Bootstrap 3 | # 3 Налаштування сітки

Тепер поговоримо про те, що буде, якщо ми не будемо використовувати всю сітку, а тільки її частину?

class="Row"gt; 
class="Col-md-2"gt;col-md 
class="Col-md-2"gt;col-md 
class="Col-md-2"gt;col-md

Тут загальна ширина 3 рядів буде дорівнює 6 колонок. Вони автоматично будуть вирівняні ліворуч. Тобто ліва частина (половина сітки) буде зайнята, а права - немає. Однак що, якщо ми хочемо вирівняти ці ряди по центру або праворуч? Для цього також є потрібні класи:

Відео: Уроки Bootstrap 3. | Налаштування сітки # 3

class="Row justify; content-md-center"gt; 
class="Col-md"gt;col-md 
class="Col-md"gt;col-md 
class="Col-md"gt;col-md

Таким чином ми можемо вирівняти наше вміст по центру. Якщо ви хочете вирівняти його по правому краю, використовуйте клас justify; content-md-end.

Розглянемо тепер, як ми можемо впорядковувати наші ряди. Це робиться дуже просто, тому що для цього також є необхідні класи:

class="Row justify; content-md-center"gt; 
class="Col-md-2 flex-last"gt;1 col-md-2 
class="Col-md-2 flex-first"gt;2 col-md-2 
class="Col-md-2"gt;3 col-md-2