ஃபிளெக்ஸ்பாக்ஸ் உருவாக்கி

காட்சி கட்டுப்பாடுகள் மூலம் ஒரு flex கொள்கலன் மற்றும் அதன் உருப்படிகளை அமைக்கவும், தளவமைப்பு நேரலையில் மாறுவதைக் காணவும், மற்றும் ஒரே கிளிக்கில் CSS-ஐ நகலெடுக்கவும்.

முன்னமைவுகள்
கொள்கலன் (Container)
திசை (Direction)
மடக்கு (Wrap)
உள்ளடக்கத்தை சீரமை (Justify content)
உருப்படிகளை சீரமை (Align items)
உருப்படிகள்
உருப்படி 1
தனி உருப்படியை சீரமை (Align self)
CSS
உங்கள் தளவமைப்பை வடிவமைக்க கொள்கலன் மற்றும் உருப்படிகளைச் சரிசெய்யவும்.

உங்கள் தளவமைப்பு உங்கள் உலாவியிலேயே உருவாக்கப்படுகிறது. நீங்கள் இங்கு அமைக்கும் எதுவும் BroBroGo-விற்கு பதிவேற்றப்படாது.

அடிக்கடி கேட்கப்படும் கேள்விகள்

justify-content மற்றும் align-items இடையே உள்ள வேறுபாடு என்ன?

Justify-content முதன்மை அச்சில் (வரிசை அல்லது நெடுவரிசை செல்லும் திசை) உருப்படிகளுக்கு இடையே இடைவெளியை அமைக்கிறது — அதே நேரத்தில் align-items அவற்றை மற்ற அச்சில் நிலைநிறுத்துகிறது. திசையை வரிசையிலிருந்து நெடுவரிசைக்கு மாற்றினால், இரண்டு அச்சுகளும் மாறும், எனவே justify-content மேலிருந்து கீழாகவும், align-items இடமிருந்து வலமாகவும் செயல்படத் தொடங்கும்.

ஒவ்வொரு உருப்படிக்குமான கட்டுப்பாடுகள் எவ்வாறு செயல்படுகின்றன?

ஒரு உருப்படியை அதன் எண்ணைக் கொண்டு தேர்ந்தெடுத்து, கூடுதல் இடத்தை நிரப்ப அது எவ்வளவு வளர வேண்டும், இடம் குறைவாக இருக்கும்போது எவ்வளவு சுருங்க வேண்டும், அதன் தொடக்க அளவு (basis) மற்றும் அதன் சொந்த குறுக்கு அச்சு சீரமைப்பை அமைக்கவும். Order என்பது HTML-ஐத் தொடாமல் திரையில் ஒரு உருப்படியை முன்னரோ அல்லது பின்னரோ நகர்த்துகிறது. நீங்கள் உண்மையில் மாற்றும் உருப்படிகள் மட்டுமே CSS-இல் தங்களின் சொந்த விதியைப் பெறுகின்றன.

wrap மற்றும் align-content எப்போது முக்கியத்துவம் பெறுகின்றன?

மடக்குதல் (wrapping) முடக்கப்பட்டால், ஒவ்வொரு உருப்படியும் ஒரே வரியில் இருக்க கட்டாயப்படுத்தப்பட்டு சுருக்கப்படலாம். அதை இயக்கினால், பொருந்தாத உருப்படிகள் அடுத்த வரிக்குச் செல்லும் — அப்போதுதான் align-content செயல்படத் தொடங்கி, வரிகளை ஒரு குழுவாக இடைவெளியிடுகிறது. Gap என்பது மார்ஜின்கள் இல்லாமல் உருப்படிகளுக்கும் வரிகளுக்கும் இடையே உள்ள இடைவெளியை அமைக்கிறது.