Este artículo describe la diferencia entre la base flexible y la propiedad de ancho junto con ejemplos de uso. La propiedad flex-basis define el tamaño inicial de los elementos flexibles según el valor de la dirección flexible. Tiene las siguientes propiedades adicionales que pueden cambiar su comportamiento:
- El valor de dirección flexible se puede establecer en fila o columna. Si su valor es fila, define el ancho y si su valor es columna, define la altura.
- La propiedad de base flexible se puede aplicar solo a elementos flexibles y la propiedad de ancho se puede aplicar a todos.
- Al usar la propiedad flex, las tres propiedades de los elementos flexibles, es decir, fila flexible, reducción flexible y base flexible, se pueden combinar en una sola declaración, pero al usar el ancho, hacer lo mismo requeriría varias líneas de código.
- Si el valor de dirección flexible se establece en columna, entonces se utiliza la propiedad de ancho horizontal para dimensionar los elementos flexibles.
Los siguientes ejemplos muestran las diferencias entre la base flexible y la propiedad de ancho y alto:
Ejemplo 1: uso de base flexible cuando la dirección flexible se establece en fila.
HTML
<!DOCTYPE html>
<html>
<head>
<title>FlexBox</title>
<style>
body {
background: #eee;
}
h1 {
color: green;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
.flex-container {
display: flex;
background: #fff;
flex-wrap: wrap;
flex-direction: row;
}
.box {
/*
Since flex-direction is set to
row therefore flex-basis defines
the width. Either of the width
property or flex-basis property
can be used as both perform
a similar task in this case.
*/
height: 100px;
flex-basis: 600px;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Flex-basis vs Width </h2>
<br>
<div class="wrapper">
<div class="flex-container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: uso de base flexible cuando la dirección flexible se establece en columna.
HTML
<!DOCTYPE html>
<html>
<head>
<title>FlexBox</title>
<style>
body {
background: #eee;
}
h1 {
color: green;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
.flex-container {
display: flex;
background: #fff;
flex-wrap: wrap;
flex-direction: column;
}
.box {
/*
Since flex-direction is set to
column therefore flex-basis defines
the height and hence overrides the
height property. The height of
flex-item will therefore be 80px.
The width property has to be separately
assigned a horizontal width.
*/
height: 100px;
width: 100px;
flex-basis: 80px;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: green;
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<h2>Flex-basis vs Width </h2>
<br>
<div class="wrapper">
<div class="flex-container">
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por kumaravnish792 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA