La propiedad abreviada flex CSS es la combinación de las propiedades flex-grow, flex-shrink y flex-basis. Se utiliza para establecer la longitud de elementos flexibles. La propiedad flexible es mucho más receptiva y compatible con dispositivos móviles. Es fácil colocar los elementos secundarios y el contenedor principal. El margen no colapsa con los márgenes del contenido. El orden de cualquier elemento se puede cambiar fácilmente sin editar la sección HTML.
Sintaxis:
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
Valores de propiedad:
- propiedad flex-grow : un número que especifica cuánto crecerán los elementos en relación con el resto de los elementos flexibles.
- propiedad flex-shrink: un número que especifica cuánto se encogerán los elementos en relación con el resto de los elementos flexibles.
- Propiedad flex-basis: Establece la longitud de los elementos. Los valores legales de base flexible son: auto, heredar o un número seguido de %, em, px o cualquier otra unidad de longitud.
- Propiedad flex-wrap: la propiedad CSS flex-wrap se usa para especificar si los elementos flexibles se fuerzan en una sola línea o se ajustan en varias líneas.
La propiedad flex se puede especificar con la ayuda de 1, 2 o 3 valores:
- Sintaxis de valor único: el valor debe contener uno de los siguientes:
- numero : Si se representa como flex: <numero> 1 0; entonces se supondrá que el valor de flex-shrink, flex-basis es 1 y 0 respectivamente.
- Se puede especificar mediante una de las palabras clave como auto, none o initial.
- Sintaxis de dos valores: Debe contener los siguientes valores:
- El primer valor debe ser el número que representará el crecimiento flexible.
- El segundo valor debe contener uno de los siguientes:
- número: si es un número, se representará como flex-shrink.
- un ancho con el valor válido representará la base flexible.
- Sintaxis de tres valores: los valores deben estar en el mismo orden:
- El primer número representa el crecimiento flexible.
- el segundo número representa la contracción por flexión.
- un ancho con el valor válido representará la base flexible.
Ejemplo: Este ejemplo describe la propiedad flex con la ayuda del valor único para representar la flexión.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS flex Property </title>
<style>
#Geeks {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}
#Geeks div {
flex: 1;
}
.GFG1 {
background-color: green;
}
.GFG2 {
background-color: lightgreen;
}
.GFG3 {
background-color: darkgreen;
}
</style>
</head>
<body>
<h2>CSS flex Property</h2>
<div id="Geeks">
<div class="GFG1"> GeeksforGeeks </div>
<div class="GFG2"> Lite Content </div>
<div class="GFG3"> Special Content </div>
</div>
</body>
</html>
Producción:
Ejemplo 2: Este ejemplo describe la propiedad flex con la ayuda de los 3 valores que representan las propiedades flex-grow, flex-shrink y flex-basis.
HTML
<!DOCTYPE html>
<html>
<head>
<title> CSS flex Property </title>
<style>
#Geeks {
width: 300px;
height: 200px;
border: 1px solid black;
display: flex;
}
#Geeks div {
flex: 1 0 auto;
}
.GFG1 {
background-color: green;
}
.GFG2 {
background-color: lightgreen;
}
.GFG3 {
background-color: darkgreen;
}
</style>
</head>
<body>
<h2>CSS flex Property</h2>
<div id="Geeks">
<div class="GFG1"> GeeksforGeeks </div>
<div class="GFG2"> Lite Content </div>
<div class="GFG3"> Special Content </div>
</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 29.0, 21.0 -webkit-
- Microsoft Edge 12.0, 12.0 -webkit-
- Internet Explorer 11.0, 10.0 -ms-
- Firefox 28.0, 18.0 -moz-
- Safari 9.0, 6.1 -webkit-
- Ópera 17.0
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA