Bu makale, Tailwind CSS'de esnek ve ızgara öğelerini sıralama yöntemini açıklayacaktır.
Tailwind'de Flex ve Grid Öğeleri Nasıl Sipariş Edilir?
Tailwind CSS'de esnek ve ızgara öğelerini sıralamak için bir HTML dosyası oluşturun. Ardından, 'order-' yardımcı programını kullanın ve esnek ve ızgara öğelerinin sırasını değiştirmek için HTML programında sıra değerini belirtin. Esnek öğelerin DOM'da (Belge Nesne Modeli) görüntülediklerinden farklı bir sırada oluşturulmasına olanak tanır. Değişiklikleri sağlamak için HTML web sayfasını görüntüleyin.
Daha iyi anlamak için verilen-sağlanan adımlara bakın:
Adım 1: HTML Programında Flex ve Grid Öğelerini Sipariş Edin
Bir HTML programı yapın ve “ sipariş-
< vücut >
< div sınıf = 'esnek h-20' >
< div sınıf = 'sipariş-3 bg-kırmızı-500 w-32 m-1' > 1 < / div >
< div sınıf = 'son sipariş bg-sarı-500 w-32 m-1' > 2 < / div >
< div sınıf = 'ilk sipariş bg-teal-500 w-32 m-1' > 3 < / div >
< div sınıf = 'sipariş-2 bg-turuncu-500 w-32 m-1' > 4 < / div >
< / div >
< / vücut >
Burada:
- “ sipariş-3 ” class, öğenin sırasını 3 olarak ayarlar ve esnek öğe, esnek kap içinde üçüncü öğe olarak konumlandırılır.
- “ son sipariş ” sınıfı, öğenin sırasını son olacak şekilde ayarlar ve esnek kap içindeki son öğe olacaktır.
- “ ilk sipariş ” sınıfı, öğenin ilk sırasını belirtir ve esnek kap içinde ilk öğe olarak konumlandırılır.
- “ sipariş-2 ” sınıfı, öğenin sırasını 2 olarak ayarlar ve esnek kap içinde ikinci öğe olarak konumlandırılır.
- “ w-32 ” sınıfı, her esnek öğeye 32 birim genişlik uygular.
- “ m-1 ” sınıfı, her esnek öğenin etrafına 1 birim kenar boşluğu ekler.
2. Adım: Çıktıyı Doğrulayın
Esnek ve ızgara öğelerinin sıralandığından emin olmak için HTML web sayfasını görüntüleyin:
Esnek ve ızgara öğelerinin, tanımlandıkları duruma göre başarılı bir şekilde sıralandığı görülmektedir.
Çözüm
Tailwind CSS'de esnek ve ızgara öğeleri sipariş etmek için ' sipariş-