Flexbox, también conocido como Flexible Box Layout, es un módulo de CSS que proporciona una forma eficiente de organizar, alinear y distribuir elementos dentro de un contenedor. Su objetivo principal es proporcionar una solución de diseño flexible y responsiva, especialmente útil cuando se trata de diseños de una sola dimensión, como filas o columnas.
Aquí tienes una descripción de lo que hace Flexbox:
Flexbox establece un “contexto de flex” en el contenedor padre mediante la propiedad
display: flex;. Esto convierte al contenedor padre en un contenedor flex que afecta a sus elementos hijos directos.Los elementos dentro del contenedor padre, conocidos como elementos flexibles o flex items, pueden ajustar su tamaño, orden y alineación para adaptarse al diseño deseado.
El contenedor padre tiene dos ejes: el eje principal (main axis) y el eje secundario (cross axis). El eje principal se define a través de la propiedad
flex-direction, mientras que el eje secundario se ajusta automáticamente en función de la dirección principal.Los elementos flexibles pueden ser distribuidos a lo largo del eje principal utilizando la propiedad
justify-content, que controla su alineación horizontal, o utilizandoalign-items, que controla su alineación vertical.Además, se puede ajustar el tamaño individual de los elementos flexibles utilizando la propiedad
flex, que define la capacidad de estiramiento y encogimiento de los elementos flexibles en relación con los demás.Flexbox también proporciona propiedades como
flex-wrappara controlar si los elementos flexibles se deben envolver en varias líneas cuando no hay suficiente espacio disponible, yalign-contentpara distribuir el espacio adicional a lo largo del eje secundario cuando hay varias líneas de elementos flexibles.
En resumen, Flexbox es una herramienta poderosa en CSS para crear diseños flexibles y responsivos, permitiendo controlar fácilmente la alineación, el orden y la distribución de los elementos dentro de un contenedor.
Aquí coloco algunos ejemplos:
Agregando estilos a un menú de navegación para un sitio web de una panadería.
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: #ffffff;
}
.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>
.item {
padding: 15px;
margin: 2px 0;
background-color: #F9F9F9;
border-radius: 5px;
width: 90%;
align-self: center;
border: 2px solid #DDDDDD;
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: #F9F9F9;
}
.buttons {
display: flex;
justify-content: flex-end;
}
body {
background-color: #F1F1F1;
}
.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";
}
Los enlaces de navegación podrían desbordarse en teléfonos más pequeños. Una solución rápida aquí sería permitir que el contenido que se desbordaría se reduzca a una segunda fila. La propiedad flex-wrap hace esto.
.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 Motos</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>
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, 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>
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>
</form>
</div>
</body>
</html>
