Flexbox Responsiv
Media query-urile îi permit unui aspect flexbox să își schimbe forma în funcție de dimensiunea ecranului și de dispozitiv.
Să luăm un design cu trei coloane pe ecrane mari și o coloană pe ecrane mici. O abordare schimbă flex-direction din row în column odată ce este atins un punct de întrerupere ales.
Cealaltă abordare păstrează direcția și modifică procentajul dat proprietății flex pe fiecare element flex. Pentru ca asta să funcționeze, containerul flex are nevoie și de flex-wrap: wrap;.
Schimbarea flex-direction
La o lățime a ecranului de 600px sau mai puțin, flex-direction trece din row în column.
Prompt
Creați o pagină cu un aspect flexbox pe trei coloane utilizând flex-direction: row. Adăugați o media query la max-width 600px care schimbă flex-direction la column, transformându-l într-un aspect cu o singură coloană. Utilizați trei casete colorate cu text.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox - Flex Direction</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
font-size: 30px;
text-align: center;
width: 100%;
}
/* Make a one column-layout instead of three-column layout */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h1>Responsive Flexbox</h1>
<p>Resize the browser window to see the effect.</p>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
Schimbarea procentajului flex
Odată ce ecranul nu este mai lat de 600px, proprietatea flex sare de la 33.3% la 100%.
Prompt
Creați o pagină cu un container flex utilizând flex-wrap: wrap. Fiecare element flex are flex: 33.3% pentru a forma trei coloane. Adăugați o media query la max-width 600px care schimbă fiecare element la flex: 100% pentru un aspect cu o singură coloană.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox - Flex Percentage</title>
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
font-size: 30px;
flex: 33.3%;
}
/* Make a one column-layout instead of a three-column layout */
@media (max-width: 600px) {
.flex-item {
flex: 100%;
}
}
</style>
</head>
<body>
<h1>Responsive Flexbox</h1>
<p>Resize the browser window to see the effect.</p>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>
Galerie de imagini responsivă utilizând Flexbox
Combină flexbox cu media query-uri, iar o galerie de imagini își poate schimba numărul de coloane în funcție de dimensiunea ecranului.
Exemplu
Prompt
Creați o galerie de imagini responsivă utilizând flexbox și media query-uri. Afișați patru imagini pe rând pe ecrane mari, două pe rând pe ecrane medii (max-width 800px) și una pe rând pe ecrane mici (max-width 600px). Utilizați imagini de test cu text descriptiv sub fiecare.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery-item {
flex: 25%;
max-width: 25%;
padding: 4px;
}
.gallery-item img {
width: 100%;
vertical-align: middle;
}
.gallery-item .desc {
padding: 10px;
text-align: center;
background-color: #f1f1f1;
font-size: 14px;
}
@media (max-width: 800px) {
.gallery-item {
flex: 50%;
max-width: 50%;
}
}
@media (max-width: 600px) {
.gallery-item {
flex: 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<h1>Responsive Image Gallery</h1>
<p>Resize the browser window to see the responsive effect.</p>
<div class="gallery">
<div class="gallery-item">
<img src="img_5terre.jpg" alt="Cinque Terre">
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<img src="img_forest.jpg" alt="Forest">
<div class="desc">Forest</div>
</div>
<div class="gallery-item">
<img src="img_lights.jpg" alt="Northern Lights">
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<img src="img_mountains.jpg" alt="Mountains">
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
Site web responsiv utilizând Flexbox
Cu flexbox se poate realiza și un aspect complet de site web responsiv, în care atât bara de navigare, cât și zona de conținut rămân flexibile.
Exemplu
Prompt
Creați un aspect de site web responsiv utilizând flexbox. Includeți o bară de navigare în partea de sus cu linkuri, o zonă de conținut principal cu o bară laterală și un subsol. Utilizați media query-uri pentru a stivui linkurile de navigare pe verticală și a plasa bara laterală sub conținut pe ecrane mai mici de 600px.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website using Flexbox</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
margin: 0;
}
.header {
background-color: #333;
color: white;
padding: 15px;
text-align: center;
}
.navbar {
display: flex;
background-color: #555;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
.navbar a:hover {
background-color: #000;
}
.row {
display: flex;
flex-wrap: wrap;
}
.side {
flex: 30%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 70%;
background-color: white;
padding: 20px;
}
.footer {
padding: 20px;
text-align: center;
background-color: #ddd;
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
}
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>A flexible layout using CSS Flexbox.</p>
</div>
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="main">
<h2>Main Content</h2>
<p>Some text about something important.</p>
<p>Some other text about something else.</p>
</div>
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<p>Some text about me in culpa qui officia deserunt mollit anim.</p>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>