டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ் உருப்படிகள் வளரும் அல்லது சுருங்குவதைத் தடுப்பதற்கான முறையை இந்த எழுதுதல் எடுத்துக்காட்டும்.
டெயில்விண்டில் ஃப்ளெக்ஸ் பொருட்கள் வளராமல் அல்லது சுருங்குவதைத் தடுப்பது எப்படி?
டெயில்விண்டில் ஃப்ளெக்ஸ் உருப்படிகள் வளர்ந்து சுருங்குவதைத் தடுக்க, HTML கோப்பை உருவாக்கவும். பின்னர், '' பயன்படுத்தவும் flex-grow-0 'மற்றும்' flex-shrink-0 HTML திட்டத்தில் குறிப்பிட்ட நெகிழ்வு உருப்படிகளுடன் கூடிய பயன்பாடுகள். இந்த பயன்பாடுகள் ஃப்ளெக்ஸ் கொள்கலனில் உள்ள இடத்திற்கு ஏற்ப ஃப்ளெக்ஸ் பொருட்களை வளர அல்லது சுருங்க அனுமதிக்காது. அதன் பிறகு, மாற்றங்களை உறுதிப்படுத்த HTML வலைப்பக்கத்தின் திரை அளவை சரிசெய்யவும்.
அதன் நடைமுறைச் செயலாக்கத்திற்கு வழங்கப்பட்ட படிகளைப் பின்பற்றவும்:
படி 1: எச்டிஎம்எல் திட்டத்தில் ஃப்ளெக்ஸ் உருப்படிகள் வளர்வதையும் சுருங்குவதையும் தடுக்கவும்
ஒரு HTML நிரலை உருவாக்கி, ' flex-grow-0 'மற்றும்' flex-shrink-0 'விரும்பிய நெகிழ்வுப் பொருட்களைக் கொண்ட பயன்பாடுகள் அவை வளராமல் அல்லது சுருங்குவதைத் தடுக்கின்றன:
< உடல் >
< div வர்க்கம் = 'ஃப்ளெக்ஸ் எச்-20' >
< div வர்க்கம் = 'flex-grow-0 bg-yellow-500 w-40 m-1' > 1 < / div >
< div வர்க்கம் = 'flex-shrink-0 bg-fuchsia-500 w-40 m-1' > 2 < / div >
< div வர்க்கம் = 'flex-grow bg-teal-500 w-40 m-1' > 3 < / div >
< div வர்க்கம் = 'ஃப்ளெக்ஸ்-சுருக்க bg-red-500 w-40 m-1' > 4 < / div >
< / div >
< / உடல் >
இங்கே:
- ' flex-grow-0 இடம் கிடைக்கும் போது ஃப்ளெக்ஸ் கன்டெய்னருக்குள் ஃப்ளெக்ஸ் உருப்படி வளர்ந்து கூடுதல் இடத்தை எடுத்துக்கொள்வதை வகுப்பு தடுக்கிறது.
- ' flex-shrink-0 இடம் போதுமானதாக இல்லாத போது ஃப்ளெக்ஸ் கன்டெய்னருக்குள் ஃப்ளெக்ஸ் உருப்படி சுருங்கி குறைவதை வகுப்பு தடுக்கிறது.
- ' நெகிழ்வு-வளர்ச்சி 'கிளாஸ் ஃப்ளெக்ஸ் உருப்படி வளர மற்றும் ஃப்ளெக்ஸ் கொள்கலனுக்குள் இருக்கும் இடத்தை ஆக்கிரமிக்க அனுமதிக்கிறது.
- ' நெகிழ்வு-சுருக்க 'கிளாஸ் ஃப்ளெக்ஸ் கொள்கலனுக்குள் போதுமான இடம் இல்லாவிட்டால், ஃப்ளெக்ஸ் உருப்படியை சுருங்க அனுமதிக்கிறது.
படி 2: வெளியீட்டைச் சரிபார்க்கவும்
HTML இணையப் பக்கத்தைப் பார்த்து, விரும்பிய நெகிழ்வுப் பொருட்கள் வளர்ந்து சுருங்குவதிலிருந்து தடுக்கப்பட்டுள்ளதை உறுதிசெய்ய திரையின் அளவை மாற்றவும்:
ஃப்ளெக்ஸ் உருப்படி '2' போதுமான இடத்தில் சுருங்கவில்லை என்பதையும் '1' உருப்படி இருக்கும் இடத்தில் வளரவில்லை என்பதையும் மேலே உள்ள வெளியீடு காட்டுகிறது. விரும்பிய நெகிழ்வுப் பொருட்கள் வளர்ந்து சுருங்குவதிலிருந்து தடுக்கப்பட்டிருப்பதை இது குறிக்கிறது.
முடிவுரை
டெயில்விண்டில் ஃப்ளெக்ஸ் பொருட்கள் வளர்ந்து சுருங்குவதைத் தடுக்க, ' flex-grow-0 'மற்றும்' flex-shrink-0 HTML நிரலில் விரும்பிய நெகிழ்வு உருப்படிகளுடன் கூடிய பயன்பாடுகள். சரிபார்ப்புக்கு, HTML வலைப்பக்கத்தின் திரை அளவை மாற்றவும் மற்றும் பார்க்கவும். டெயில்விண்ட் CSS இல் ஃப்ளெக்ஸ் உருப்படிகள் வளரும் அல்லது சுருங்குவதைத் தடுக்கும் முறையை இந்த எழுதுதல் எடுத்துக்காட்டுகிறது.