También se le llama modelo de caja flexible. Básicamente es un modelo de diseño que proporciona una manera fácil y limpia de organizar elementos dentro del contenedor. Flexbox es diferente del modelo de bloque que tiene un sesgo vertical y el en línea que tiene un sesgo horizontal. Flexbox se creó para diseños de escalas pequeñas y hay otro estándar llamado cuadrículas que está más orientado a diseños de escalas más grandes. Funciona de manera similar a como funciona el sistema de cuadrícula de arranque de Twitter. Flexbox es receptivo y compatible con dispositivos móviles. Para comenzar con flexbox, primero cree un contenedor flexible. Para crear un contenedor flexible, establezca la propiedad de visualización en flex.
Ejemplo:
.main-container {
display: flex;
}
Propiedades flexibles:
- dirección de flexión
- envoltura flexible
- flujo flexible
- justificar-contenido
- alinear elementos
- alinear-contenido
dirección flexible: la dirección flexible se utiliza para definir la dirección del elemento flexible. El eje predeterminado es horizontal en flexbox, por lo que los elementos fluyen en una fila.
Sintaxis:
// Stacking flex items column wise flex-direction: column; // Stacking flex items from bottom to top flex-direction: column-reverse; // Stacking flex items row wise flex-direction: row; // Stacking flex items from right to left flex-direction: row-reverse;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>flexbox</title>
<style>
.gfg_flex {
display: flex;
flex-direction: row;
background-color: green;
text-align:center;
}
.gfg_flex > div {
background-color: #f4f4f4;
width: 100px;
height:100px;
margin: 10px;
font-size: 40px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>flex-direction Property</h2>
<div class="gfg_flex">
<div>Box A</div>
<div>Box B</div>
<div>Box C</div>
<div>Box D</div>
<div>Box E</div>
</div>
</body>
</html>
Producción:
flex-wrap: la propiedad flex-wrap se utiliza para definir el ajuste de elementos flexibles. Si la propiedad flex-wrap está configurada para envolver, entonces la ventana del navegador establece la casilla. Si la ventana del navegador es más pequeña que los elementos, los elementos bajan a la siguiente línea.
Sintaxis:
// Wrap flex items when necessary flex-wrap: wrap; // Flex items will not wrap flex-wrap: nowrap;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
.gfg_flex {
display: flex;
flex-wrap: wrap;
text-align:center;
background-color: green;
}
.gfg_flex > div {
background-color: #f4f4f4;
width: 100px;
height:100px;
margin: 10px;
font-size: 40px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>flex-wrap Property</h2>
<div class="gfg_flex">
<div>Box A</div>
<div>Box B</div>
<div>Box C</div>
<div>Box D</div>
<div>Box E</div>
<div>Box F</div>
<div>Box G</div>
<div>Box H</div>
<div>Box I</div>
</div>
</body>
</html>
Producción:
Nota: Flex-flow es una abreviatura de flex-direction y flex-wrap.
Sintaxis:
flex-flow: row wrap;
justificar-contenido: la propiedad justificar-contenido se utiliza para alinear los elementos flexibles de acuerdo con el eje principal dentro de un contenedor de caja flexible.
Sintaxis:
// Aligns the flex items at the center justify-content: center; // The space is distributed around the flexbox items //and it also adds space before the first item and after the last one. justify-content: space-around; // Space between the lines justify-content: space-between; // Aligns the flex items at the beginning of the container justify-content: flex-start; // Aligns the flex items at the end of the container justify-content: flex-end;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>justify flexbox property</title>
<style>
.flex1 {
display: flex;
justify-content: center;
background-color: green;
}
.flex2 {
display: flex;
justify-content: space-around;
background-color: green;
}
.flex3 {
display: flex;
justify-content: space-between;
background-color: green;
}
.flex4 {
display: flex;
justify-content: flex-start;
background-color: green;
}
.flex5 {
display: flex;
justify-content: flex-end;
background-color: green;
}
.flex-items {
background-color: #f4f4f4;
width: 100px;
height:50px;
margin: 10px;
text-align: center;
font-size: 40px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>The justify-content Property</h2>
<b>justify-content: center </b>
<div class="flex1">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>justify-content: space-around </b>
<div class="flex2">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>justify-content: space-between </b>
<div class="flex3">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>justify-content: flex-start </b>
<div class="flex4">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>justify-content: flex-end </b>
<div class="flex5">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
</body>
</html>
Producción:
align-items: esta propiedad se utiliza para alinear elementos flexibles verticalmente de acuerdo con el eje transversal.
Sintaxis:
// Aligns the flex items in the middle of the container align-items: center; // Flexbox items are aligned at the baseline of the cross axis align-items: baseline; // Stretches the flex items align-items: stretch; // Aligns the flex items at the top of the container align-items: flex-start; // Aligns elements at the bottom of the container align-items: flex-end;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>align-items property</title>
<style>
.flex1 {
display: flex;
height: 200px;
align-items: center;
background-color: green;
}
.flex2 {
display: flex;
height: 200px;
align-items: baseline;
background-color: green;
}
.flex3 {
display: flex;
height: 200px;
align-items: stretch;
background-color: green;
}
.flex4 {
display: flex;
height: 200px;
align-items: flex-start;
background-color: green;
}
.flex5 {
display: flex;
height: 200px;
align-items: flex-end;
background-color: green;
}
.flex-items {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>The align-items Property</h2>
<b>align-items: center </b>
<div class="flex1">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>align-items: baseline </b>
<div class="flex2">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>align-items: stretch </b>
<div class="flex3">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>align-items: flex-start </b>
<div class="flex4">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
<br>
<b>align-items: flex-end </b>
<div class="flex5">
<div class="flex-items">1</div>
<div class="flex-items">2</div>
<div class="flex-items">3</div>
</div>
</body>
</html>
Producción:
align-content: esta propiedad define cómo se alinea cada línea flexible dentro de un flexbox y solo se aplica si se aplica flex-wrap: wrap, es decir, si hay varias líneas de elementos de flexbox presentes.
Sintaxis:
// Displays the flex lines with equal space between them align-content: space-between; // Displays the flex lines at the start of the container align-content: flex-start; // Displays the flex lines at the end of the container align-content: flex-end; // Dy using space-around property space will be // Distributed equally around the flex lines align-content: space-around; // Stretches the flex lines align-content: stretch;
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>The align-content Property</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por vivekkothari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA