La propiedad flex en 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 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. Pero pocas veces tenemos un ancho desigual del elemento, también esa vez puedes diseñar todo en la sección CSS.
Sintaxis:
flex: number;
Nota: el ancho de los elementos depende de los otros elementos y la pantalla de su ventana en este caso.
Ejemplo 1: Aquí verás los dos tipos de ancho de flexbox que se diseñan usando CSS.
<!DOCTYPE html>
<html>
<head>
<title>Unequal width of Element | Flexbox</title>
<style>
h1{
color:green;
}
div.flexcontainer{
display: flex;
min-height: 200px;
font-size:15px;
}
div.columns{
flex: 1;
padding: 10px;
}
div.columns:nth-of-type(even){
flex: 2;
}
div.columns:nth-of-type(odd){
background: #85929E;
color: white;
}
div.columns:nth-of-type(even){
background: #A5DDEF;
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div class="flexcontainer">
<div class="columns">This is 1st column</div>
<div class="columns">This is 2nd column</div>
<div class="columns">This is 3rd column</div>
<div class="columns">This is 4th column</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, verá 4 elementos, cada uno de ellos con un ancho diferente en comparación entre sí.
<!DOCTYPE html>
<html>
<head>
<title>Unequal width of Element | Flexbox</title>
<style>
h1{
color:green;
}
div.flexcontainer{
display: flex;
min-height: 200px;
font-size:15px;
border:2px solid orange;
}
div.columns{
padding: 10px;
color:white;
}
div.columns:nth-of-type(1){
flex: 0.5;
background: #1B2631;
}
div.columns:nth-of-type(2){
flex: 1;
background:#424949;
}
div.columns:nth-of-type(3){
flex: 2;
background:#4D5656;
}
div.columns:nth-of-type(4){
flex: 3;
background:#626567;
}
th, td{
border:1px solid white;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<div class="flexcontainer">
<div class="columns">ID</div>
<div class="columns">Ph_no</div>
<div class="columns">Name</div>
<div class="columns">Adsress</div>
</div>
</body>
</html>
Producción:
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