Flexible Box Module o Flexbox es un tipo de modelo de diseño. El objetivo principal de este diseño es distribuir el espacio entre los elementos de un contenedor. Este diseño es un modelo de diseño unidimensional. El diseño de flexbox funciona incluso cuando el tamaño de los elementos es desconocido o dinámico.
Para establecer el espacio entre flexbox, puede usar la propiedad de flexbox justificar contenido , también puede visitar todas las propiedades en ese enlace.
Podemos usar la propiedad de justificar el contenido de un contenedor flexible para establecer el espacio entre el cuadro flexible.
Sintaxis:
- El valor space- between se utiliza para mostrar elementos flexibles con espacio entre líneas.
justify-content: space-between;
- El valor space-around se usa para mostrar elementos flexibles con espacio entre, antes y después de las líneas.
justify-content: space-around;
El siguiente ejemplo ilustrará la propiedad utilizada para establecer el espacio entre el flexbox.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Space between flexbox</title>
<style>
.flex2 {
display: flex;
justify-content: space-around;
background-color: green;
}
.flex3 {
display: flex;
justify-content: space-between;
background-color: green;
}
.flex-items {
background-color: #f4f4f4;
width: 100px;
height:50px;
margin: 10px;
text-align: center;
font-size: 40px;
}
h3 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h3>Space between flexbox</h3>
<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>
</body>
</html>
Producción: