Flexbox или гъвкав контейнер е оформление, което позволява на потребителите да подравняват и разпределят елементи в контейнер. Tailwind CSS предлага различни помощни класове за създаване и работа с flexbox. Гъвкав контейнер на ниво кутия е гъвкав контейнер, който се държи/действа като елемент на ниво блок и създава блок. Той заема цялата ширина на своя родителски елемент и прави нов ред след себе си.
Това описание ще илюстрира метода за създаване на гъвкав контейнер на ниво блок в Tailwind.
Как да създадете/направите гъвкав контейнер на ниво блок в Tailwind?
За да създадете конкретен гъвкав контейнер на ниво блок в Tailwind, направете HTML структура. След това добавете „ flex ” полезен клас с желания
Синтаксис
< див клас = 'гъвкав...' >
...
див >
Код
< тяло >
< див клас = 'flex gap-2 m-2 border-2 border-black' >
< див клас = 'bg-yellow-500 p-4' > Първи елемент див >
< див клас = 'bg-yellow-500 p-4' > Втори елемент див >
< див клас = 'bg-yellow-500 p-4' > Трети елемент див >
див >
тяло >
Тук, в родителския
-
- “ flex ” се използва за създаване на гъвкав контейнер на ниво блок.
- “ празнина-2 ” добавя 2 единици разстояние между дъщерните елементи на flex.
- “ m-2 ” добавя 2 единици марж към всички страни на контейнера.
- “ граница-2 ” клас добавя границата към контейнера с 2 единици ширина.
- “ граница-черна ” клас задава цвета на рамката на черен.
В детските гъвкави елементи:
-
- “ bg-yellow-500 ” прилага жълт цвят към фона на гъвкавия елемент.
- “ p-4 ” клас добавя подплата от 4 единици към всички страни на гъвкавите елементи.
Изход
В горния изход рамката представлява, че контейнерът е гъвкав контейнер на ниво блок, който заема цялата ширина на своя родителски елемент (браузър).
Като алтернатива, потребителят може да се увери в това, като провери елемента на гъвкав контейнер на уеб страницата:
Горният изход показва, че контейнерът е гъвкав контейнер на ниво блок.
Заключение:
За да създадете гъвкав контейнер на ниво блок в Tailwind, е необходимо да добавите „ flex ” полезен клас с конкретния контейнер и посочете дъщерните му елементи. Потребителите могат да дефинират и променят гъвкави елементи според нуждите си. За проверка добавете границата към контейнера и вижте уеб страницата или проверете този елемент на уеб страницата. Тази статия обяснява метода за създаване на гъвкав контейнер на ниво блок в Tailwind.