Paano Magtakda ng Flex Basis sa Tailwind?

Ipapaliwanag ng artikulong ito ang paraan upang itakda ang flex-basis sa Tailwind CSS.

Paano Magtakda ng Flex Basis sa Tailwind?

Para itakda ang flex-basis sa Tailwind CSS, gumawa ng HTML file. Pagkatapos, gamitin ang ' batayan- ” utility class sa HTML program at tukuyin ang laki ng flex item. Itinatakda ng utility na ito ang paunang laki ng mga flex item. Upang matiyak ang mga pagbabago, tingnan ang web page.

Tingnan ang ibinigay na mga hakbang para sa isang praktikal na pagpapakita:

Hakbang 1: Itakda ang Flex Basis sa HTML Program
Gumawa ng HTML program at gamitin ang ' batayan- ” utility class para itakda ang laki ng flex item. Halimbawa, ginamit namin ang ' batayan-1/4 ”, “ batayan-1/3 ”, at “ batayan-1/2 ” mga utility para magtakda ng tatlong flex item:

dito:

• “ baluktot Ang klase ng ” ay ginagamit para gumawa ng flexible na layout at ayusin ang mga laki ng elemento ng bata batay sa available na espasyo.
• “ h-20 Itinakda ng klase ng ” ang taas ng
  sa 20 units.
• “ batayan-1/4 Itinakda ng klase ng ” ang panloob na
  na lapad ng elemento sa 25% ng pangunahing elemento nito.
• “ batayan-1/3 Itinakda ng klase ng ” ang lapad ng panloob na
  sa 33.33% ng parent container nito.
• “ batayan-1/2 Itinakda ng klase ng ” ang lapad ng
  sa 50% ng parent container nito.
• “ bg-pula-400 Ang klase ng ” ay naglalapat ng pulang kulay ng background sa
  .
• “ bg-teal-400 Ang klase ng ” ay nagtatakda ng teal na kulay sa background ng
  .
• “ bg-orange-400 Ang klase ng ” ay inilalapat ang kulay kahel na background sa
  .
• “ m-1 ” class ay nagdaragdag ng margin ng 1 unit sa paligid ng bawat
  element.

Hakbang 2: I-verify ang Output
Upang matiyak na ang flex-basis ay naitakda at gumagana nang maayos, tingnan ang HTML web page:

Sa output sa itaas, ang flex-basis ay makikita ayon sa kung saan sila ay naka-istilo.

Konklusyon

Ang Flex na batayan ay nagbibigay-daan sa mga user na lumikha ng mga flexible na layout na umaayon sa iba't ibang laki at resolution ng screen. Upang itakda ang flex-basis sa Tailwind CSS, ang ' batayan- Ang utility class ay ginagamit sa HTML program. Kailangang tukuyin ng mga user ang laki ng flex item at tiyakin ang mga pagbabago sa pamamagitan ng pagtingin sa web page. Ipinaliwanag ng artikulong ito ang paraan upang itakda ang flex-basis sa Tailwind CSS.