டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ் மற்றும் கிரிட் பொருட்களை ஆர்டர் செய்யும் முறையை இந்தக் கட்டுரை விளக்குகிறது.
டெயில்விண்டில் ஃப்ளெக்ஸ் மற்றும் கிரிட் பொருட்களை ஆர்டர் செய்வது எப்படி?
டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ் மற்றும் கிரிட் பொருட்களை ஆர்டர் செய்ய, HTML கோப்பை உருவாக்கவும். பின்னர், 'ஆர்டர்-' பயன்பாட்டைப் பயன்படுத்தி, நெகிழ்வு மற்றும் கட்டம் உருப்படிகளின் வரிசையை மாற்ற HTML நிரலில் ஆர்டர் மதிப்பைக் குறிப்பிடவும். இது ஃப்ளெக்ஸ் உருப்படிகளை DOM (ஆவண பொருள் மாதிரி) இல் காட்டுவதை விட வேறுபட்ட வரிசையில் வழங்க அனுமதிக்கிறது. மாற்றங்களை உறுதிப்படுத்த, HTML வலைப்பக்கத்தைப் பார்க்கவும்.
சிறந்த புரிதலுக்காக கொடுக்கப்பட்ட படிகளைப் பார்க்கவும்:
படி 1: HTML திட்டத்தில் ஃப்ளெக்ஸ் மற்றும் கிரிட் பொருட்களை ஆர்டர் செய்யவும்
ஒரு HTML நிரலை உருவாக்கி, ' ஆர்டர்-
< உடல் >
< div வர்க்கம் = 'ஃப்ளெக்ஸ் எச்-20' >
< div வர்க்கம் = 'order-3 bg-red-500 w-32 m-1' > 1 < / div >
< div வர்க்கம் = 'ஆர்டர்-கடைசி பிஜி-மஞ்சள்-500 w-32 மீ-1' > 2 < / div >
< div வர்க்கம் = 'ஆர்டர்-முதல் bg-teal-500 w-32 m-1' > 3 < / div >
< div வர்க்கம் = 'order-2 bg-orange-500 w-32 m-1' > 4 < / div >
< / div >
< / உடல் >
இங்கே:
- ' உத்தரவு-3 ”வகுப்பு உறுப்பு வரிசையை 3 ஆக அமைக்கிறது மற்றும் நெகிழ்வான உருப்படியானது ஃப்ளெக்ஸ் கொள்கலனில் மூன்றாவது உருப்படியாக நிலைநிறுத்தப்படும்.
- ' ஆர்டர்-கடைசி 'வகுப்பு உறுப்புகளின் வரிசையை கடைசியாக அமைக்கிறது, மேலும் இது ஃப்ளெக்ஸ் கொள்கலனில் உள்ள கடைசி உருப்படியாக இருக்கும்.
- ' ஆர்டர்-முதல் 'வகுப்பு முதலில் இருக்க வேண்டிய உறுப்பின் வரிசையைக் குறிப்பிடுகிறது, மேலும் அது ஃப்ளெக்ஸ் கொள்கலனில் முதல் உருப்படியாக நிலைநிறுத்தப்படும்.
- ' உத்தரவு-2 ”வகுப்பு உறுப்பு வரிசையை 2 ஆக அமைக்கிறது, மேலும் அது ஃப்ளெக்ஸ் கொள்கலனில் இரண்டாவது உருப்படியாக நிலைநிறுத்தப்படும்.
- ' w-32 ”வகுப்பு ஒவ்வொரு ஃப்ளெக்ஸ் உருப்படிக்கும் 32 யூனிட் அகலத்தைப் பயன்படுத்துகிறது.
- ' மீ-1 ” வகுப்பு ஒவ்வொரு ஃப்ளெக்ஸ் உருப்படியைச் சுற்றி 1 யூனிட் விளிம்பைச் சேர்க்கிறது.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
ஃப்ளெக்ஸ் மற்றும் கிரிட் உருப்படிகள் ஆர்டர் செய்யப்பட்டுள்ளதா என்பதை உறுதிப்படுத்த HTML இணையப் பக்கத்தைப் பார்க்கவும்:
ஃப்ளெக்ஸ் மற்றும் கிரிட் உருப்படிகள் அவை குறிப்பிடப்பட்டதன் படி வெற்றிகரமாக ஆர்டர் செய்யப்பட்டுள்ளதை அவதானிக்கலாம்.
முடிவுரை
டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ் மற்றும் கிரிட் பொருட்களை ஆர்டர் செய்ய, ' ஒழுங்கு-<மதிப்பு> ” பயன்பாடு மற்றும் HTML நிரலில் உள்ள பொருட்களை நெகிழ்வு மற்றும் கட்டத்திற்கான ஆர்டர் மதிப்பைக் குறிப்பிடவும். இது வலைப்பக்கத்தில் உள்ள நெகிழ்வு மற்றும் கட்ட உருப்படிகளை மறுசீரமைக்கிறது. சரிபார்ப்புக்கு, HTML வலைப்பக்கத்தில் மாற்றங்களைப் பார்த்து, மாற்றங்களை உறுதிப்படுத்தவும். இந்தக் கட்டுரை டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ் மற்றும் கிரிட் பொருட்களை ஆர்டர் செய்யும் முறையை விளக்குகிறது.