Flexbox, also known as Flexible Box Layout, is a CSS module that provides an efficient way to organize, align and distribute elements within a container. Its main purpose is to provide a flexible and responsive layout solution, especially useful when dealing with one-dimensional layouts, such as rows or columns.
Here is a description of what it does Flexbox:
Flexbox sets a "flex context" in the parent container by means of the property
display: flex;. This turns the parent container into a flex container that affects its direct child elements.Elements within the parent container, known as flex items, can adjust their size, order and alignment to suit the desired design.
The parent container has two axes: the main axis (main axis) and the cross axis (cross axis). The main axis is defined through the property
flex-directionThe secondary axis is automatically adjusted according to the main direction.The flexible elements can be distributed along the main axis by using the property
justify-contentwhich controls its horizontal alignment, or by usingalign-itemswhich controls its vertical alignment.In addition, you can adjust the individual size of the flexible elements using the property
flexwhich defines the stretching and shrinking capacity of the flexible elements in relation to each other.Flexbox also provides properties such as
flex-wrapto control whether flexible elements should be wrapped in several lines when there is not enough space available, andalign-contentto distribute the additional space along the secondary shaft when there are several lines of flexible elements.
In summary, Flexbox is a powerful CSS tool for creating flexible and responsive layouts, allowing you to easily control the alignment, order and layout of elements within a container.
Here are some examples:
Adding styles to a navigation menu for a bakery website.
body {
font-family: sans-serif;
}
#welcome {
margin-top: 20px;
padding: 0px 20px;
}
img {
margin-left: 20px;
float: right;
max-width: 40%;
min-width: 20%;
}
h1 {
text-align: center;
}
.container {
display: flex;
width: 100%;
background-color: #DE9C51;
color: #ffffffff;
}
.item {
margin: 10px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Nonna's Italian Bakery</h1>
<div class="container">
<div class="item">Home</div>
<div class="item">Menu</div>
<div class="item">Pasteries</div>
<div class="item">Contact</div>
</div>
<div id="welcome">
<img decoding="async" src="https://mimo.app/i/bread.png">
<h2>Welcome!</h2>
<p>Nonna's Italian Bakery has something for everyone, including breads,
desserts, gelato, and more.</p>
<p>Stop in today to see what Nonna's cooking up!</p>
</div>
</body>
</html>
Using flexbox to align a web page with the best movies of the past.
.item {
padding: 15px;
margin: 2px 0;
background-color: #F9F9F9F9;
border-radius: 5px;
width: 90%;
align-self: center;
border: 2px solid #DDDDDDDDDDD;
color: #FFA600;
}
h1,
.item {
text-align: center;
font-weight: bold;
}
h1 {
font-family: Verdana;
text-decoration: underline;
}
button {
border-radius: 5px;
margin: 10px 5px;
font-weight: bold;
border: 1px solid darkgray;
background-color: #F9F9F9F9;
}
.buttons {
display: flex;
justify-content: flex-end;
}
body {
background-color: #F1F1F1F1;
}
.movie-list {
width: 80%;
margin: auto;
}
.container {
display: flex;
flex-direction: column-reverse;
align-content: center;
justify-content: center;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Best Movies</h1>
<div class="movie-list">
<div class="buttons">
<button id="latest">Sort By Latest</button>
<button id="oldest">Sort By Oldest</button>
</div>
<div id="movies" class="container">
<div class="item"> 2017 - Lady Bird </div>
<div class="item"> 2018 - Black Panther </div>
<div class="item"> 2019 - Parasite </div>
<div class="item"> 2020 - One Night of Miami </div>
<div class="item"> 2021 - Nomadland </div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
document.getElementById("latest").addEventListener("click", updateLatest);
document.getElementById("oldest").addEventListener("click", updateOldest);
function updateLatest() {
document.getElementById("movies").style["flex-direction"] = "column-reverse";
}
function updateOldest() {
document.getElementById("movies").style["flex-direction"] = "column";
}
Using CSS Flexbox to align elements on a motorcycle website.
Navigation links could overflow on smaller phones. A quick fix here would be to allow the content that would overflow to shrink to a second row. The flex-wrap property does this.
.container {
display: flex;
}
.navigation {
padding: 0px;
margin: 0px;
flex-direction: row;
flex-wrap: wrap;
}
.todayPromo {
flex-direction: column;
}
body {
font-family: Arial, sans-serif;
background-color: #FFF9F5;
color: #36454F;
text-align: center;
margin: 0;
}
h1 {
font-size: 50px;
}
h2 {
font-size: 30px;
}
a {
margin: 15px;
text-decoration: none;
color: #36454F;
}
img {
width: 150px;
border: solid 3px #36454F;
border-radius: 5px;
}
img:hover {
cursor: pointer;
}
.item {
margin: 10px;
font-size: 15px;
}
.partners {
text-decoration: underline;
flex-direction: row-reverse;
justify-content: center;
}
.otherPromo {
height: 540px;
flex-direction: column-reverse;
}
<html>
<title>Milla's Motos</title>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container navigation">
<div class="item"><a href="#">Home</a></div>
<div class="item"><a href="#">New</a></div>
<div class="item"><a href="#">Used</a></div>
<div class="item"><a href="#">Clearance</a></div>
</div>
<h1>Milla's Motorcycles</h1>
<h2>Click Today's Promotions!</h2>
<div class="container todayPromo">
<div class="item"><img decoding="async" src="https://mimo.app/i/moto1.png"></div>
<div class="item"><img decoding="async" src="https://mimo.app/i/moto6.png"></div>
<div class="item"><img decoding="async" src="https://mimo.app/i/moto2.png"></div>
</div>
<h3>Check out our partner sites!</h3>
<div class="container partners">
<div class="item"><a href="#">Bob's Boats</a></div>
<div class="item"><a href="#">Anne's Airplanes</a></div>
<div class="item"><a href="#">Charlie's Cars</a></div>
</div>
<h2>Other Promotions</h2>
<div class="container otherPromo">
<div class="item"><img decoding="async" src="https://mimo.app/i/moto5.png"></div>
<div class="item"><img decoding="async" src="https://mimo.app/i/moto3.png"></div>
<div class="item"><img decoding="async" src="https://mimo.app/i/moto4.png"></div>
</div>
</body>
</html>
Using CSS Flexbox to design a video playlist.
body {
font-family: Garamond;
background-color: black;
color: white;
}
.accountNav {
display: flex;
flex-direction: row-reverse;
}
button {
background-color: red;
margin: 5px;
padding: 5px;
border: solid white 1px;
color: white;
}
nav {
margin: 5px;
padding: 5px;
}
.container {
display: flex;
}
.list {
flex-direction: column;
}
.playlistImg {
width: 10%;
margin: 10px;
}
.playlist {
display: flex;
flex-direction: row;
}
#selected {
background-color: gray;
}
.comments {
display: flex;
flex-direction: column;
}
.name {
font-weight: bold;
color: gray;
}
<!doctype html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<h1>Video Playlist</h1>
<div class="accountNav">
<button>Sign Up</button>
<button>Log In</button>
</div>
</nav>
<div class="container">
<div class="video">
<img decoding="async" src="https://mimo.app/i/colorful-path.png" width="100%" />
<h2>Color theory 101</h2>
<p> Colors are what make the world beautiful. It is a way to express our emotions and feelings.
emotions and feelings, it is also used to communicate with others.
Take a dive into the theory of colors with Allen Green, painter and
art professor.</p>
</div>
<div class="list">
<div class="playlist" id="selected">
<img decoding="async" src="https://mimo.app/i/colorful-path.png" class="playlistImg" />
<p>Color theory 101</p>
</div>
<div class="playlist">
<img decoding="async" src="https://mimo.app/i/moonlanding.png" class="playlistImg" />
<p>Moon Landing - Documentary</p>
</div>
<div class="playlist">
<img decoding="async" src="https://mimo.app/i/nacho.png" class="playlistImg" />
<p>My cat's first vlog</p>
</div>
<div class="playlist">
<img decoding="async" src="https://mimo.app/i/camera.png" class="playlistImg" />
<p>Best Cameras 2022</p>
</div>
</div>
</div>
<div class="comments">
<h2>Comments(3)</h2>
<div class="comment">
<p class="name">JoshTV</p>
<p>Fantastic!</p>
</div>
<div class="comment">
<p class="name">PrankGuru</p>
<p>Very informative! Please make more of such videos</p>
</div>
<div class="comment">
<p class="name">Dani Talks Tech</p>
<p>Good job!</p>
</div>
</div>
</body>
</html>
Recreate a contact form using flex.
html,
body {
font-family: 'Arial', sans-serif;
background: lightblue;
}
.contact-page {
margin: 5%;
display: flex;
justify-content: center;
align-items: center;
}
.contact-form {
border-radius: 10px;
background-color: lightgray;
border: 1px solid dimgray;
margin-top: auto;
margin-bottom: auto;
}
.header {
padding: 15px;
}
h2 {
text-align: center;
color: slategray;
margin: 0;
}
.form-body {
background: white;
padding: 10px;
}
.row {
display: flex;
justify-content: center;
}
.input-group {
display: flex;
flex-direction: column;
margin: 10px;
}
.form-footer {
display: flex;
justify-content: flex-end;
padding: 10px;
}
.btn {
padding: 15px;
background-color: turquoise;
font-size: 17px;
border: none;
border-radius: 5px;
color: white;
}
label {
color: darkturquoise;
font-size: 17px;
font-weight: 500;
}
.form-input,
textarea {
font-size: 18px;
height: 34px;
padding-left: 10px;
padding-right: 10px;
color: grey;
border: 1px solid lightgray;
border-radius: 4px;
background: white;
}
textarea {
width: 480px;
height: 100px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Contact Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="contact-page">
<form class="contact-form">
<header class="header">
<h2>Get in Touch</h2>
</header>
<div class="form-body">
<div class="row">
<div class="input-group">
<label>First name </label>
<input class="form-input" type="text"
placeholder="Enter your first name">
</div>
<div class="input-group">
<label>Last name</label>
<input class="form-input" type="text"
placeholder="Enter your last name">
</div>
</div>
<div class="row">
<div class="input-group">
<label>Email </label>
<input class="form-input" type="email"
placeholder="Enter your email address">
</div>
<div class="input-group">
<label>Phone </label>
<input class="form-input" type="phone"
placeholder="Enter your phone number">
</div>
</div>
<div class="row">
<div class="input-group">
<label for="">Message</label>
<textarea> </textarea>
</div>
</div>
</div>
<div class="form-footer">
<button class="btn">Submit</button>
</div>
<input type="hidden" name="trp-form-language" value="en"/></form>
</div>
</body>
</html>
