Flexbox என்பது ஒரு பரிமாணத்தின் தளவமைப்பு முறை — இது வரிசை அல்லது நெடுவரிசையில் உருப்படிகளை அமைக்கிறது மற்றும் அந்த வரிசையுடன் இடத்தை விநியோகிக்கிறது. இது தட்டையாக்கல் மற்றும் தந்திரூபாயங்களைத் தேவைப்பட்ட சீரமைப்பு மற்றும் இடைவெளி சிக்கல்களுக்கான நவீன பதில்.
.container {
display: flex;
: row;
: ;
}
Flexbox-ஐ முதன்மை அச்சு (உருப்படிகள் பாயும் திசை) மற்றும் குறுக்கு அச்சு (செங்குத்து) உள்ளது. சொத்துக்கள் அவற்றுடன் வரைபடமாக்கப்படுகின்றன:
.container {
justify-content: center; /* aligns along the MAIN axis */
align-items: center; /* aligns along the CROSS axis */
}
.center {
display: flex;
justify-content: center; /* horizontal (main axis = row) */
align-items: center; /* vertical (cross axis) */
min-height: 100vh;
}
இந்த மூன்று வரிகள் குழந்தையை கிடைமட்ட மற்றும் செங்குத்தாக மையத்தில் வைக்கின்றன — Flexbox-க்கு முன் மிகவும் கடினமான பணி.
/* push items apart: logo left, menu right */
.navbar { display: flex; justify-content: space-between; align-items: center; }
/* wrap to new lines when items don't fit */
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
justify-content விருப்பங்கள் flex-start, center, flex-end, space-between, space-around, space-evenly ஆகியவை அடங்கும்.
Flexbox என்பது நாவிகேஷன் பார், பொத்தான் குழுக்கள், கார்ட் வரிசைகள், மையம் மற்றும் "உருப்படிகளின் வரிசை" தளவமைப்பிற்கான நாளாந்த கருவியாகும்.
প்রধான/குறுக்கு அச்சு மாதிரியைப் புரிந்துகொள்வது (மற்றும் justify-content/align-items-ன் பொருள் flex-direction மாறும்போது மாறும்) முக்கியமான மানসिक மாதிரி ஆகும்.
1D தளவமைப்பிற்கு Flexbox ஐ பயன்படுத்தவும் மற்றும் 2D க்கு Grid ஐ பயன்படுத்தவும்.