டெயில்விண்ட் சிஎஸ்எஸ்ஸில் ஃப்ளெக்ஸ் உருப்படிகள் போர்த்தப்படுவதைத் தடுக்கும் முறையை இந்தக் கட்டுரை விளக்குகிறது.
ஃப்ளெக்ஸ் பொருட்களை டெயில்விண்டில் போர்த்துவதைத் தடுப்பது/நிறுத்துவது எப்படி?
ஃப்ளெக்ஸ் உருப்படிகளை டெயில்விண்டில் போர்த்துவதைத் தடுக்க, ஒரு HTML கோப்பை உருவாக்கவும். பின்னர், ஃப்ளெக்ஸ் உருப்படிகளை மடக்குவதைத் தடுக்க, HTML நிரலில் உள்ள நெகிழ்வு கொள்கலனுடன் “ஃப்ளெக்ஸ்-நவ்ராப்” பயன்பாட்டைப் பயன்படுத்தவும். அடுத்து, HTML வலைப்பக்கத்தைப் பார்ப்பதன் மூலம் மாற்றங்களை உறுதிப்படுத்தவும்.
அதை நன்றாக புரிந்து கொள்ள, கீழே குறிப்பிடப்பட்டுள்ள படிகளை முயற்சிக்கவும்:
படி 1: ஃப்ளெக்ஸ் உருப்படிகளை HTML திட்டத்தில் மடக்குவதைத் தடுக்கவும்
ஒரு HTML நிரலை உருவாக்கி, ' flex-nowrap ஃப்ளெக்ஸ் பொருட்களைப் போர்த்துவதைத் தடுக்க விரும்பிய நெகிழ்வு கொள்கலனுடன் கூடிய பயன்பாடு:
< உடல் >
< div வர்க்கம் = 'ஃப்ளெக்ஸ் ஃப்ளெக்ஸ்-நவ்ராப் எச்-40' >
< div வர்க்கம் = 'அடிப்படை-1/4 பிஜி-சிவப்பு-500 மீ-1' > 1 < / div >
< div வர்க்கம் = 'அடிப்படை-1/3 பிஜி-மஞ்சள்-500 மீ-1' > 2 < / div >
< div வர்க்கம் = 'அடிப்படை-1/2 பிஜி-டீல்-500 மீ-1' > 3 < / div >
< / div >
< / உடல் >
இங்கே:
- ' நெகிழ்வு 'வகுப்பு flexbox அமைப்பை செயல்படுத்துகிறது உறுப்பு மற்றும் குழந்தை உறுப்புகளை ஒழுங்கமைக்க மற்றும் சீரமைக்க அனுமதிக்கிறது.
- ' flex-nowrap 'பிளெக்ஸ் உருப்படிகள் பல வரிகளில் மடிக்கக்கூடாது மற்றும் அனைத்து நெகிழ்வுப் பொருட்களையும் ஒரே வரியில் வைத்திருக்க வேண்டும் என்று வகுப்பு குறிப்பிடுகிறது.
- ' அடிப்படை-1/4 ”,” அடிப்படை-1/3 ', மற்றும் ' அடிப்படை-1/2 ”வகுப்புகள் உள்ளத்தை அமைக்கின்றன
அகலத்தின் அகலம் முறையே 25%, 33.33%, மற்றும் 50% அவற்றின் பெற்றோர் உறுப்புகள்.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
ஃப்ளெக்ஸ் உருப்படிகள் மூடப்பட்டிருக்கவில்லை என்பதை உறுதிப்படுத்த, HTML வலைப்பக்கத்தைப் பார்க்கவும்:
மேலே உள்ள வலைப்பக்கத்தில், ஃப்ளெக்ஸ் உருப்படிகள் ஒரே வரியில் உள்ளன மற்றும் அவை மூடப்பட்டிருக்கவில்லை.
முடிவுரை
ஃப்ளெக்ஸ் உருப்படிகள் டெயில்விண்டில் போர்த்தப்படுவதைத் தடுக்க, HTML நிரலில் விரும்பிய ஃப்ளெக்ஸ் கொள்கலனுடன் 'ஃப்ளெக்ஸ்-நவ்ராப்' பயன்பாட்டைப் பயன்படுத்தவும். இந்த பயன்பாடு ஃப்ளெக்ஸ் பொருட்களை மடக்குவதைத் தடுக்கிறது. சரிபார்ப்புக்கு, வலைப்பக்கத்தில் மாற்றங்களைப் பார்க்கவும். டெயில்விண்ட் சிஎஸ்எஸ்ஸில் ஃப்ளெக்ஸ் உருப்படிகள் போர்த்தப்படுவதைத் தடுக்கும் முறையை இந்தக் கட்டுரை விளக்கியுள்ளது.