CSS Flex Responsive
In CSS Media Queries, you learned how to make your website look good on all sorts of screens and devices. By using media queries, you can create layouts that adjust nicely whether someone’s using a big computer monitor or a small smartphone screen. It’s like making sure your website looks awesome everywhere!
Syntax
.main { display: flex; flex-wrap: wrap; justify-content: space-around; padding: 20px; } // Responsive layout - makes a one column // layout instead of a three-column layout @media (max-width: 768px) { main { flex-direction: column; } }
Example: In this example we will see the implementation responsiveness webpage with help of css flexbox responsivness.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #635f5f;
color: white;
padding: 10px;
text-align: center;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 20px;
}
section {
flex: 1;
margin: 10px;
padding: 20px;
border: 1px solid #ddd;
box-sizing: border-box;
}
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
@media (max-width: 768px) {
main {
flex-direction: column;
}
}
</style>
<title>Responsive Layout</title>
</head>
<body>
<header>
<h1>Mobile Friendly</h1>
</header>
<main>
<section>
<h2>Item 1</h2>
<p>Content for Item 1...</p>
</section>
<section>
<h2>Item 2</h2>
<p>Content for Item 2...</p>
</section>
<section>
<h2>Item 3</h2>
<p>Content for Item 3...</p>
</section>
</main>
<footer>
<p>© Your Company</p>
</footer>
</body>
</html>
Output:
Complete Guide to CSS Flexbox
Flexbox, short for Flexible Box Layout, is a powerful CSS layout model that simplifies the creation of responsive and adaptable web designs. It excels at arranging elements within a container, optimizing space distribution, and handling dynamic content. This article will cover the basic idea of CSS Flexbox, along with various properties available for the Flexbox & understand them with the help of suitable examples.
Syntax:
.container { display: flex; flex-direction: row; /* or column, etc. */ }
Example: In this example, all the flex properties will be used just by changing the “container class” and “item class”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Styled Items</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
background-color: #f8acff;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
background-color: darkgray;
box-sizing: border-box;
width: 30%;
height: 30vh;
}
.item {
width: 90px;
height: 80px;
display: flex;
margin: 0;
align-items: center;
justify-content: center;
border: 2px solid #333;
box-sizing: border-box;
}
.item:nth-child(1) {
background-color: #3498db;
}
.item:nth-child(2) {
background-color: #2ecc71;
}
.item:nth-child(3) {
background-color: #e74c3c;
}
.item:nth-child(4) {
background-color: #f39c12;
}
.item:nth-child(5) {
background-color: magenta;
}
</style>
</head>
<body>
<h3>flex-basis</h3>
<div class="container">
<p class="item item1">Item1</p>
<p class="item item2">Item2</p>
<p class="item item3">Item3</p>
<p class="item item4">Item4</p>
</div>
</body>
</html>
Output:
Contact Us