CSS Flexbox தளவமைப்பின் அடிப்படைகள்
CSS Flexbox என்பது இணையப் பக்கங்களில் உள்ள உறுப்புகளை எளிதாகவும் நெகிழ்வாகவும் சீரமைக்கப் பயன்படும் ஒரு சக்திவாய்ந்த தளவமைப்பு முறையாகும். இது ஒரு கொள்கலன் (container) மற்றும் அதற்குள் இருக்கும் உருப்படிகளுக்கு (items) இடையேயான உறவை அடிப்படையாகக் கொண்டது. இந்த முறையைப் பயன்படுத்தி, பல்வேறு திரை அளவுகளுக்கு ஏற்ப மாறக்கூடிய வடிவமைப்புகளை உருவாக்க முடியும்.
ஒரு பயனர் காட்சிப்பூர்வமாக ஒரு flex கொள்கலன் மற்றும் அதன் உருப்படிகளை அமைக்கவும், தளவமைப்பு நேரலையில் மாறுவதைக் காணவும், மற்றும் ஒரே கிளிக்கில் CSS-ஐ நகலெடுக்கவும் "ஃபிளெக்ஸ்பாக்ஸ் உருவாக்கி" உதவுகிறது. இந்த கருவி மூலம் உருவாக்கப்படும் தளவமைப்பு முற்றிலும் பயனரின் உலாவியிலேயே உருவாக்கப்படுகிறது. நீங்கள் இங்கு அமைக்கும் எதுவும் BroBroGo-விற்கு பதிவேற்றப்படாது.
கொள்கலன் பண்புகள் (Container Properties)
ஃபிளெக்ஸ்பாக்ஸ் அமைப்பில் கொள்கலன் என்பது அதன் உள்ளே இருக்கும் உருப்படிகளைத் தாங்கி நிற்கும் முதன்மைப் பகுதியாகும். "ஃபிளெக்ஸ்பாக்ஸ் உருவாக்கி" கருவியில் கொள்கலன் (Container) பிரிவின் கீழ் பின்வரும் பண்புகளைக் கட்டுப்படுத்தலாம்:
- திசை (Direction): இது உருப்படிகள் அடுக்கப்படும் திசையைத் தீர்மானிக்கிறது. இதில் வரிசை (Row), தலைகீழ் வரிசை, நெடுவரிசை (Column), மற்றும் தலைகீழ் நெடுவரிசை ஆகிய விருப்பங்கள் உள்ளன. திசையை வரிசையிலிருந்து நெடுவரிசைக்கு மாற்றினால், முதன்மை மற்றும் குறுக்கு அச்சுகள் (main and cross axes) பரஸ்பரம் மாறும். இது
justify-contentமற்றும்align-itemsபண்புகள் செயல்படும் விதத்தைப் பாதிக்கிறது. - மடக்கு (Wrap): மடக்காதே, மடக்கு, மற்றும் தலைகீழ் மடக்கு ஆகிய விருப்பங்கள் இதில் உள்ளன. மடக்குதல் முடக்கப்பட்டால், அனைத்து உருப்படிகளும் ஒரே வரியில் இருக்க கட்டாயப்படுத்தப்படும். மடக்குதல் இயக்கத்தில் இருக்கும்போது, கொள்கலனுக்குள் கொள்ளாத உருப்படிகள் அடுத்த வரிக்குச் செல்லும்.
- உள்ளடக்கத்தை சீரமை (Justify content): முதன்மை அச்சில் உருப்படிகளுக்கு இடையே உள்ள இடைவெளியை இது நிர்வகிக்கிறது. இதில் தொடக்கம், முடிவு, மையம், இடையில் இடைவெளி, சுற்றிலும் இடைவெளி, மற்றும் சமமான இடைவெளி ஆகிய அமைப்புகள் உள்ளன.
- உறுப்படிகளை சீரமை (Align items): குறுக்கு அச்சில் உருப்படிகளை எவ்வாறு சீரமைப்பது என்பதை இது தீர்மானிக்கிறது. தொடக்கம், முடிவு, மையம், நீட்டிப்பு, மற்றும் அடிப்படைக்கோடு ஆகிய விருப்பங்களை இதில் பயன்படுத்தலாம்.
- உள்ளடக்கத்தை சீரமை (Align content): பல வரிகள் கொண்ட தளவமைப்பில், அந்த வரிகளுக்கு இடையேயான இடைவெளியை இது சீரமைக்கிறது. இதற்கு மடக்குதல் (wrap) இயக்கப்பட்டிருக்க வேண்டும். இதில் தொடக்கம், முடிவு, மையம், நீட்டிப்பு, இடையில் இடைவெளி, சுற்றிலும் இடைவெளி, மற்றும் சமமான இடைவெளி ஆகிய விருப்பங்கள் உள்ளன.
- இடைவெளி (Gap): இது உருப்படிகளுக்கு இடையிலும், வரிகளுக்கு இடையிலும் உள்ள இடைவெளியை ஒரு எண் மதிப்பின் மூலம் அமைக்கிறது.
உருப்படி பண்புகள் (Item Properties)
கொள்கலனுக்குள் இருக்கும் ஒவ்வொரு தனிப்பட்ட உருப்படியின் அளவையும் வரிசையையும் நாம் தனித்தனியாகக் கட்டுப்படுத்த முடியும். "உருப்படியைச் சேர்" பொத்தானைக் கிளிக் செய்யும்போது, புதிய உருப்படி (உதாரணமாக, "Item 5") தளவமைப்பில் தோன்றும். உருப்படிகள் பிரிவில் பின்வரும் பண்புகளை மாற்றியமைக்கலாம்:
- வரிசைமுறை (Order): HTML குறியீட்டின் வரிசையை மாற்றாமல், திரையில் உருப்படிகள் தோன்றும் வரிசையை மாற்ற ஒரு எண் மதிப்பை இங்கு உள்ளிடலாம்.
- வளர்ச்சி (Grow): கொள்கலனில் கூடுதல் இடம் இருக்கும்போது, ஒரு உருப்படி எவ்வளவு விகிதத்தில் வளர வேண்டும் என்பதைத் தீர்மானிக்கும் எண் மதிப்பு இதுவாகும்.
- சுருக்கம் (Shrink): கொள்கலனில் இடம் பற்றாக்குறையாக இருக்கும்போது, உருப்படி எவ்வளவு விகிதத்தில் சுருங்க வேண்டும் என்பதைக் குறிக்கும் எண் மதிப்பு.
- அடிப்படை (Basis): ஒரு உருப்படியின் தொடக்க அளவை இது குறிக்கிறது. இதற்கு ஒரு எண் மதிப்பையோ அல்லது "தானியங்கி" (Auto) என்ற அமைப்பையோ வழங்கலாம்.
- தனி உருப்படியை சீரமை (Align self): கொள்கலனின் பொதுவான சீரமைப்பைத் தவிர்த்து, ஒரு குறிப்பிட்ட உருப்படியை மட்டும் குறுக்கு அச்சில் சீரமைக்க இது உதவுகிறது. இதில் தானியங்கி, தொடக்கம், முடிவு, மையம், நீட்டிப்பு, மற்றும் அடிப்படைக்கோடு ஆகிய விருப்பங்கள் உள்ளன.
மாற்றங்களைச் செய்த பிறகு, "CSS-ஐ நகலெடு" பொத்தானைக் கிளிக் செய்வதன் மூலம் குறியீட்டை நகலெடுக்கலாம். அப்போது அந்தப் பொத்தான் "Copied" என்று மாறும். நீங்கள் எந்த உருப்படிகளின் பண்புகளை மாற்றியமைக்கிறீர்களோ, அவற்றுக்கு மட்டுமே பிரத்யேக CSS விதிகள் உருவாக்கப்படும்.
பொதுவான தளவமைப்பு மாதிரிகள் (Common Layout Patterns)
ஃபிளெக்ஸ்பாக்ஸ் மூலம் இணைய வடிவமைப்பில் அடிக்கடி பயன்படுத்தப்படும் சில பொதுவான தளவமைப்புகளை எளிதாக உருவாக்க முடியும்:
| தளவமைப்பு மாதிரி | பயன்படுத்தப்படும் முக்கிய பண்புகள் |
|---|---|
| மையம் | justify-content: center; மற்றும் align-items: center; பண்புகளைப் பயன்படுத்தி கொள்கலனின் நடுப்பகுதியில் உருப்படியை வைக்கலாம். |
| வழிசெலுத்தல் பட்டி | justify-content: space-between; அல்லது space-around; கொண்டு உருப்படிகளை கிடைமட்டமாகப் பரப்பலாம். |
| அடுக்கு | flex-direction: column; அமைப்பதன் மூலம் உருப்படிகளை ஒன்றன் கீழ் ஒன்றாக அடுக்கலாம். |
| அட்டைகள் | flex-wrap: wrap; மற்றும் gap பண்புகளைப் பயன்படுத்தி பல அட்டை வடிவங்களை நேர்த்தியாக வரிசைப்படுத்தலாம். |
| பக்கவாட்டுப் பட்டி | முதன்மைப் பகுதி மற்றும் பக்கவாட்டுப் பகுதியின் அளவுகளை flex-grow மற்றும் flex-basis மூலம் பிரித்து அமைக்கலாம். |
அடிக்கடி கேட்கப்படும் கேள்விகள் (FAQ)
justify-content மற்றும் align-items இடையே உள்ள வேறுபாடு என்ன?
Justify-content முதன்மை அச்சில் (வரிசை அல்லது நெடுவரிசை செல்லும் திசை) உருப்படிகளுக்கு இடையே இடைவெளியை அமைக்கிறது — அதே நேரத்தில் align-items அவற்றை மற்ற அச்சில் நிலைநிறுத்துகிறது. திசையை வரிசையிலிருந்து நெடுவரிசைக்கு மாற்றினால், இரண்டு அச்சுகளும் மாறும், எனவே justify-content மேலிருந்து கீழாகவும், align-items இடமிருந்து வலமாகவும் செயல்படத் தொடங்கும்.
ஒவ்வொரு உருப்படிக்குமான கட்டுப்பாடுகள் எவ்வாறு செயல்படுகின்றன?
ஒரு உருப்படியை அதன் எண்ணைக் கொண்டு தேர்ந்தெடுத்து, கூடுதல் இடத்தை நிரப்ப அது எவ்வளவு வளர வேண்டும், இடம் குறைவாக இருக்கும்போது எவ்வளவு சுருங்க வேண்டும், அதன் தொடக்க அளவு (basis) மற்றும் அதன் சொந்த குறுக்கு அச்சு சீரமைப்பை அமைக்கவும். Order என்பது HTML-ஐத் தொடாமல் திரையில் ஒரு உருப்படியை முன்னரோ அல்லது பின்னரோ நகர்த்துகிறது. நீங்கள் உண்மையில் மாற்றும் உருப்படிகள் மட்டுமே CSS-இல் தங்களின் சொந்த விதியைப் பெறுகின்றன.
wrap மற்றும் align-content எப்போது முக்கியத்துவம் பெறுகின்றன?
மடக்குதல் (wrapping) முடக்கப்பட்டால், ஒவ்வொரு உருப்படியும் ஒரே வரியில் இருக்க கட்டாயப்படுத்தப்பட்டு சுருக்கப்படலாம். அதை இயக்கினால், பொருந்தாத உருப்படிகள் அடுத்த வரிக்குச் செல்லும் — அப்போதுதான் align-content செயல்படத் தொடங்கி, வரிகளை ஒரு குழுவாக இடைவெளியிடுகிறது. Gap என்பது மார்ஜின்கள் இல்லாமல் உருப்படிகளுக்கும் வரிகளுக்கும் இடையே உள்ள இடைவெளியை அமைக்கிறது.