CSS Flexbox (Flexible Box Layout)
CSS Flexbox என்பது CSS Flexible Box Layout தொகுதிக்கான சுருக்கமாகும்.
Flexbox என்பது ஒரு கொள்கலனுக்குள் உருப்படிகளை (கிடைமட்டமாக அல்லது செங்குத்தாக) நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய வழியில் வரிசைப்படுத்துவதற்கான ஒரு அமைப்பு மாதிரியாகும்.
Flexbox மிதவை அல்லது நிலைநிறுத்தலைப் பயன்படுத்தாமல் ஒரு நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய அமைப்பை வடிவமைக்க எளிதாக்குகிறது.
Flexbox vs. Grid
CSS Flexbox
- ஒரு-பரிமாண அமைப்புக்குப் பயன்படுத்தப்படுகிறது
- வரிசைகள் அல்லது நெடுவரிசைகள்
- உருப்படிகளை ஒரு திசையில் (கிடைமட்டமாக அல்லது செங்குத்தாக) வரிசைப்படுத்துகிறது
- உள்ளடக்க-மையமான அமைப்புகளுக்கு ஏற்றது
CSS Grid
- இரு-பரிமாண அமைப்புக்குப் பயன்படுத்தப்படுகிறது
- வரிசைகள் மற்றும் நெடுவரிசைகள்
- உருப்படிகளை இரு திசைகளில் வரிசைப்படுத்துகிறது
- பக்க அமைப்புகளுக்கு ஏற்றது
உதவிக்குறிப்பு:
Flexbox மற்றும் Grid இரண்டையும் ஒரே தளத்தில் பயன்படுத்தலாம். Flexbox சிறிய கூறுகளுக்கும், Grid பெரிய பக்க அமைப்புகளுக்கும் ஏற்றது.
CSS Flexbox Components
ஒரு flexbox எப்போதும் கொண்டிருக்கும்:
- ஒரு Flex Container - பெற்றோர் (கொள்கலன்) உறுப்பு, அங்கு display பண்பு flex அல்லது inline-flex என அமைக்கப்படும்
- ஒன்று அல்லது அதற்கு மேற்பட்ட Flex Items - flex கொள்கலனின் நேரடி குழந்தைகள் தானாகவே flex உருப்படிகளாக மாறும்
A Flex Container with Three Flex Items
கீழே உள்ள உறுப்பு மூன்று flex உருப்படிகளுடன் ஒரு flex கொள்கலனை (நீல பகுதி) குறிக்கிறது.
Flexbox Example
மூன்று flex உருப்படிகளுடன் ஒரு flex கொள்கலன்:
<html>
<head>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>கவனத்திற்குரியது:
நீங்கள் அடுத்த அத்தியாயங்களில் flex கொள்கலன்கள் மற்றும் flex உருப்படிகளைப் பற்றி மேலும் அறிவீர்கள். இது CSS Flexbox பற்றிய அறிமுகம் மட்டுமே.