CSS proporciona un módulo de diseño de cuadro flexible, también conocido como flexbox , que facilita el diseño de un diseño de respuesta flexible. Para comenzar a usar un modelo de caja flexible , primero debemos definir un contenedor flexible y los elementos secundarios directos del contenedor se denominan elementos flexibles.
Flex tiene las siguientes propiedades predefinidas para cambiar el tamaño de los elementos flexibles.
- ordenar
- crecimiento flexible
- flexión-encogimiento
- base flexible
- flexionar
- alinearse
Sintaxis:
flex-item: order | flex-grow | flex-shrink |
flex-basis | auto | align-self |
flex | initial | inherit;
Código de muestra:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
</body>
</html>
Producción:
1. orden: esta propiedad se puede usar para especificar el orden de los elementos flexibles.
Ejemplo: El siguiente código ilustra el uso de la orden flexible.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="order: 2">A</div>
<div style="order: 3">B</div>
<div style="order: 1">C</div>
</div>
</body>
</html>
Producción:
2. crecimiento flexible: esta propiedad se puede usar para especificar cuánto puede crecer un elemento en relación con otros elementos en el contenedor.
Ejemplo: El siguiente código ilustra el uso del valor de propiedad de crecimiento flexible.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 80%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="flex-grow: 1">A</div>
<div style="flex-grow: 3">B</div>
<div style="flex-grow: 6">C</div>
</div>
</body>
</html>
Producción:
3. flex-shrink: esta propiedad se puede usar para especificar cuánto se puede encoger un elemento en relación con otros elementos en el contenedor. Su valor por defecto es 1.
Ejemplo: El siguiente código ilustra el uso del valor de la propiedad flex-shrink.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>A</div>
<div style="flex-shrink: 0">B</div>
<div>C</div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</body>
</html>
Salida :
4. base flexible: esta propiedad se puede usar para especificar la longitud inicial de un elemento en el contenedor flexible.
Ejemplo: El siguiente código ilustra el uso de la base flexible.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>A</div>
<div style="flex-basis: 250px">B</div>
<div>C</div>
</div>
</body>
</html>
Salida :
5. flex: esta propiedad es una compilación de flex-grow, flex-shrink y flex-basis. Puede especificar las tres propiedades dentro de flex.
Ejemplo: El siguiente código ilustra el uso de flex.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>A</div>
<div style="flex: 2 0 200px">B</div>
<div>C</div>
</div>
</body>
</html>
Salida :
6. align-self: esta propiedad se puede utilizar para especificar la alineación del elemento seleccionado. Cuando se define, anula la alineación definida por el contenedor. Toma valores: centro, flex-start o flex-end.
Ejemplo: El siguiente código ilustra el uso del valor de la propiedad flex align-self.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
width: 50%;
height: 250px;
}
.flex-container > div {
background-color: rgb(33, 246, 107);
color: "#000000";
width: 100px;
margin: 15px;
text-align: center;
line-height: 75px;
font-size: 35px;
}
</style>
</head>
<body>
<div class="flex-container">
<div style="align-self: flex-start">A</div>
<div style="align-self: center">B</div>
<div style="align-self: flex-end">C</div>
</div>
</body>
</html>
Salida :
Publicación traducida automáticamente
Artículo escrito por swapnil074 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA