Responsive Flexbox
CSS Media Queries அத்தியாயத்தில் இருந்து நீங்கள் கற்றுக்கொண்டது போல், வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களுக்கு வெவ்வேறு வடிவமைப்புகளை உருவாக்க media queries-ஐப் பயன்படுத்தலாம்.
உதாரணமாக, பெரிய திரை அளவுகளுக்கு மூன்று-நெடுவரிசை வடிவமைப்பையும், சிறிய திரை அளவுகளுக்கு (தொலைபேசிகள் போன்றவை) ஒரு-நெடுவரிசை வடிவமைப்பையும் உருவாக்க விரும்பினால், ஒரு குறிப்பிட்ட breakpoint-ல் flex-direction-ஐ row-லிருந்து column-க்கு மாற்றலாம் (கீழே உள்ள எடுத்துக்காட்டில் 600px):
பிரௌசர் சாளரத்தின் அளவை மாற்றி விளைவைக் காண்க.
எடுத்துக்காட்டு 1: flex-direction மாற்றம்
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
font-size: 30px;
text-align: center;
width: 100%;
}
/* மூன்று-நெடுவரிசை வடிவமைப்புக்கு பதிலாக ஒரு நெடுவரிசை வடிவமைப்பை உருவாக்கவும் */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}விளக்கம்:
600px-க்குக் கீழே உள்ள திரை அளவுகளுக்கு, flex-direction-ஐ column-க்கு மாற்றுகிறோம், இதனால் உருப்படிகள் செங்குத்தாக அடுக்கப்படுகின்றன.
எடுத்துக்காட்டு 2: flex பண்பு மாற்றம்
மற்றொரு வழி என்னவென்றால், வெவ்வேறு திரை அளவுகளுக்கு வெவ்வேறு வடிவமைப்புகளை உருவாக்க flex items-ன் flex பண்பின் சதவீதத்தை மாற்றுவதாகும். இந்த எடுத்துக்காட்டு செயல்பட flex container-ல் flex-wrap: wrap; சேர்க்க வேண்டும் என்பதை கவனிக்கவும்:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
font-size: 30px;
flex: 33.3%;
}
/* மூன்று-நெடுவரிசை வடிவமைப்புக்கு பதிலாக ஒரு நெடுவரிசை வடிவமைப்பை உருவாக்கவும் */
@media (max-width: 600px) {
.flex-item {
flex: 100%;
}
}மொபைல் மாற்றம்:
600px-க்குக் கீழே, ஒவ்வொரு flex item-உம் 100% அகலத்தை எடுத்துக்கொள்கிறது, இதனால் அவை செங்குத்தாக அடுக்கப்படுகின்றன.
Flexbox-ஐப் பயன்படுத்தி Responsive Image Gallery
இங்கே, நாங்கள் பதிலளிக்கும் படத் தொகுப்பை உருவாக்க media queries-ஐ flexbox-உடன் இணைந்து பயன்படுத்துகிறோம்:
படம் 3
Flexbox வடிவமைப்பு
படம் 4
Responsive வடிவமைப்பு
படம் 5
மொபைல் உகந்தது
படம் 6
டெப்லாப் வடிவமைப்பு
வடிவமைப்பு குறிப்பு:
இந்த படத் தொகுப்பு தானாகவே வெவ்வேறு திரை அளவுகளுக்கு பொருந்தும். பெரிய திரைகளில் பல நெடுவரிசைகள் மற்றும் சிறிய திரைகளில் ஒரு நெடுவரிசையைக் காண்பிக்கும்.
Flexbox-ஐப் பயன்படுத்தி Responsive வலைத்தளம்
நெகிழ்வான வழிசெலுத்தல் பட்டை மற்றும் நெகிழ்வான உள்ளடக்கம் கொண்ட பதிலளிக்கும் வலைத்தளத்தை உருவாக்க flexbox-ஐப் பயன்படுத்தவும்:
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
}
/* Header/logo Title */
.header {
padding: 60px;
text-align: center;
background: #1abc9c;
color: white;
}
/* Style the top navigation bar */
.navbar {
display: flex;
background-color: #333;
}
/* Style the navigation bar links */
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
/* Main column */
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
/* Responsive layout - when the screen is less than 700px wide,
make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row, .navbar {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Header -->
<div class="header">
<h1>My Website</h1>
<p>With a flexible layout.</p>
</div>
<!-- Navigation Bar -->
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<!-- The flexible grid (content) -->
<div class="row">
<div class="side">
<h2>About Me</h2>
<p>Some text about me..</p>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>பயிற்சி
பயிற்சி:
மொபைல் சாதனங்களுக்கு flex container-ஐ செங்குத்து நெடுவரிசையாக மாற்ற சரியான media query-ஐத் தேர்ந்தெடுக்கவும்.
.flex-container {
display: flex;
flex-direction: row;
}
/* சரியான media query-ஐச் சேர்க்கவும் */
{
.flex-container {
flex-direction: column;
}
}