டெயில்விண்ட் சிஎஸ்எஸ்ஸில் ஃப்ளெக்ஸ் அடிப்படையை அமைப்பதற்கான முறையை இந்தக் கட்டுரை விளக்குகிறது.
டெயில்விண்டில் ஃப்ளெக்ஸ் அடிப்படையை எவ்வாறு அமைப்பது?
டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ் அடிப்படையை அமைக்க, ஒரு HTML கோப்பை உருவாக்கவும். பின்னர், பயன்படுத்தவும் ' அடிப்படையில்-<அளவு> HTML நிரலில் பயன்பாட்டு வகுப்பு மற்றும் நெகிழ்வு உருப்படியின் அளவைக் குறிப்பிடவும். இந்த பயன்பாடு ஃப்ளெக்ஸ் உருப்படிகளின் ஆரம்ப அளவை அமைக்கிறது. மாற்றங்களை உறுதிப்படுத்த, இணையப் பக்கத்தைப் பார்க்கவும்.
நடைமுறை விளக்கத்திற்காக கொடுக்கப்பட்ட படிகளைப் பாருங்கள்:
படி 1: HTML திட்டத்தில் ஃப்ளெக்ஸ் அடிப்படையை அமைக்கவும்
ஒரு HTML நிரலை உருவாக்கி, '' ஐப் பயன்படுத்தவும் அடிப்படையில்-<அளவு> 'ஃப்ளெக்ஸ் உருப்படியின் அளவை அமைக்க பயன்பாட்டு வகுப்பு. உதாரணமாக, நாங்கள் பயன்படுத்தினோம் ' அடிப்படை-1/4 ”,” அடிப்படை-1/3 ', மற்றும் ' அடிப்படை-1/2 'மூன்று நெகிழ்வு உருப்படிகளை அமைக்க பயன்பாடுகள்:
< உடல் >
< div வர்க்கம் = 'ஃப்ளெக்ஸ் எச்-20' >
< div வர்க்கம் = 'அடிப்படை-1/4 பிஜி-சிவப்பு-400 மீ-1' > 1 < / div >
< div வர்க்கம் = 'அடிப்படை-1/3 பிஜி-டீல்-400 மீ-1' > 2 < / div >
< div வர்க்கம் = 'அடிப்படை-1/2 பிஜி-ஆரஞ்சு-400 மீ-1' > 3 < / div >
< / div >
< / உடல் >
இங்கே:
- ' நெகிழ்வு 'கிளாஸ் ஒரு நெகிழ்வான அமைப்பை உருவாக்கவும், கிடைக்கும் இடத்தின் அடிப்படையில் குழந்தை உறுப்புகளின் அளவை சரிசெய்யவும் பயன்படுகிறது.
- ' h-20 ” வகுப்பு இன் உயரத்தை 20 அலகுகளாக அமைக்கிறது.
- ' அடிப்படை-1/4 ” class ஆனது உள்
தனிமத்தின் அகலத்தை அதன் மூல உறுப்பின் 25% ஆக அமைக்கிறது.- ' அடிப்படை-1/3 ” வகுப்பு உள்
அகலத்தை அதன் மூலக் கொள்கலனில் 33.33% ஆக அமைக்கிறது.- ' அடிப்படை-1/2 ” class ஆனது
ன் அகலத்தை அதன் பெற்றோர் கொள்கலனில் 50% ஆக அமைக்கிறது.- ' bg-red-400 ”வகுப்பு
க்கு சிவப்பு பின்னணி நிறத்தைப் பயன்படுத்துகிறது.- ' bg-teal-400 ” வகுப்பு டீல் நிறத்தை
ன் பின்னணியில் அமைக்கிறது.- ' பிஜி-ஆரஞ்சு-400 ” வகுப்பு ஆரஞ்சு பின்னணி நிறத்தை
க்கு பயன்படுத்துகிறது.- ' மீ-1 ” வகுப்பு ஒவ்வொரு
உறுப்பையும் சுற்றி 1 அலகு விளிம்பைச் சேர்க்கிறது.படி 2: வெளியீட்டைச் சரிபார்க்கவும்
ஃப்ளெக்ஸ்-அடிப்படை அமைக்கப்பட்டு, சரியாகச் செயல்படுவதை உறுதிசெய்ய, HTML இணையப் பக்கத்தைப் பார்க்கவும்:
மேலே உள்ள வெளியீட்டில், ஃப்ளெக்ஸ்-அடிப்படையில் அவை வடிவமைக்கப்பட்டுள்ளன என்பதைக் காணலாம்.
முடிவுரை
ஃப்ளெக்ஸ் அடிப்படையானது, பல்வேறு திரை அளவுகள் மற்றும் தீர்மானங்களுக்கு ஏற்ப நெகிழ்வான தளவமைப்புகளை உருவாக்க பயனர்களுக்கு உதவுகிறது. டெயில்விண்ட் CSS இல் நெகிழ்வு அடிப்படையை அமைக்க, ' அடிப்படையில்-<அளவு> HTML நிரலில் பயன்பாட்டு வகுப்பு பயன்படுத்தப்படுகிறது. பயனர்கள் நெகிழ்வு உருப்படியின் அளவைக் குறிப்பிட வேண்டும் மற்றும் வலைப்பக்கத்தைப் பார்ப்பதன் மூலம் மாற்றங்களை உறுதிப்படுத்த வேண்டும். இந்தக் கட்டுரை டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ்-அடிப்படையை அமைப்பதற்கான முறையை விளக்கியுள்ளது.
- ' அடிப்படை-1/4 ” class ஆனது உள்