La propiedad flex se usa para establecer la longitud de los elementos flexibles independientemente de su contenido en CSS. Entonces, para hacer que los elementos flexibles tengan la misma longitud, independientemente de su contenido en CSS, usamos la propiedad flexible. Toma tres valores: el primero es flex-grow que especifica cuántos elementos crecerán en relación con el resto de los elementos flexibles, el segundo es flex-shrink que especifica cuántos elementos se reducirán en relación con el resto de los elementos flexibles, y el tercero es la longitud de los artículos. En este artículo, aprenderemos cómo los elementos flexibles tienen la misma longitud, independientemente de su contenido en CSS.
Sintaxis:
flex: flex-crecer flex-reducir flex-base|automático|inicial|heredar;
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
center {
margin: 50px;
color: green;
font-size: 60px;
}
.parent {
display: flex;
border: solid 3px red;
width: 400px;
height: 300px;
}
.parent div {
flex: 1;
}
.gfg1 {
background-color: wheat;
}
.gfg2 {
background-color: rgb(197, 197, 197);
}
.gfg3 {
background-color: azure;
}
</style>
</head>
<body>
<center>
<div class="parent">
<div class="gfg1">Geeks</div>
<div class="gfg2">for</div>
<div class="gfg3">Geeks</div>
</div>
</center>
</body>
</html>
Producción:
Antes de aplicar la propiedad flex:
Después de aplicar la propiedad flex:
Publicación traducida automáticamente
Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA