Флекбок или флек контејнер је распоред који омогућава корисницима да поравнају и дистрибуирају елементе унутар контејнера. Таилвинд ЦСС нуди различите услужне класе за креирање и рад са флекбок-ом. Флек контејнер на нивоу кутије је флексибилни контејнер који се понаша/понаша као елемент на нивоу блока и ствара блок. Заузима целу ширину свог родитељског елемента и прави нову линију иза себе.
Овај текст ће илустрирати метод креирања флек контејнера на нивоу блока у Таилвинд-у.
Како направити/направити флексибилни контејнер на нивоу блока у Таилвинд-у?
Да бисте креирали одређени флек контејнер на нивоу блока у Таилвинд-у, направите ХТМЛ структуру. Затим додајте „ флек ” услужна класа са жељеним <див> и наведите њене подређене елементе. Ово ће заузети пуну ширину свог родитељског елемента (претраживача) и направити нову линију иза себе.
Синтакса
< див класа = 'флек ...' >
...
див >
Код
< тело >
< див класа = 'флек гап-2 м-2 бордер-2 бордер-блацк' >
< див класа = 'бг-жуто-500 п-4' > Прва ставка див >
< див класа = 'бг-жуто-500 п-4' > Друга ставка див >
< див класа = 'бг-жуто-500 п-4' > Трећа ставка див >
див >
тело >
Овде, у родитељском <див> контејнеру:
-
- “ флек ” класа се користи за креирање флексибилног контејнера на нивоу блока.
- “ јаз-2 ” класа додаје 2 јединице размака између флек подређених елемената.
- “ м-2 ” класа додаје 2 јединице маргине на све стране контејнера.
- “ граница-2 ” класа додаје ивицу контејнеру са 2 јединице ширине.
- “ граница-црна ” класа поставља боју ивице на црну.
У дечјим флекс елементима:
-
- “ бг-жуто-500 ” класа примењује жуту боју на позадину флек ставке.
- “ п-4 ” класа додаје допуну од 4 јединице на све стране флек ставки.
Излаз
У горњем излазу, граница представља да је контејнер флекс контејнер на нивоу блока, који заузима целу ширину свог родитељског елемента (претраживача).
Алтернативно, корисник то може да осигура тако што ће прегледати елемент флек контејнера на веб страници:
Горњи излаз показује да је контејнер флек контејнер на нивоу блока.
Закључак:
Да бисте креирали флекс контејнер на нивоу блока у Таилвинд-у, потребно је додати „ флек ” услужна класа са одређеним контејнером и наведите његове подређене елементе. Корисници могу дефинисати и модификовати флексибилне ставке према својим потребама. За верификацију, додајте ивицу у контејнер и погледајте веб страницу или прегледајте тај елемент на веб страници. Овај чланак је објаснио метод креирања флексибилног контејнера на нивоу блока у Таилвинд-у.