La propiedad flex-basis en CSS se usa para especificar el tamaño inicial del elemento flexible. La propiedad flex no se usa si el elemento no es un elemento flexible.
Sintaxis:
flex-basis: number|auto|initial|inherit;
Valor por defecto:
- auto
Valores de propiedad:
- número: Es una unidad de longitud que define la longitud inicial de ese artículo.
- auto: Es el valor por defecto, si no se especifica la longitud la longitud será de acuerdo a su contenido.
- initial: establece la propiedad en su valor predeterminado.
- heredar: especifica que una propiedad debe heredar su valor de su elemento padre.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<style>
.Geeks {
width: 385px;
height: 70px;
display: flex;
}
.Geeks div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 80px;
/* For Safari 6.1 and above browsers */
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-webkit-flex-basis: 80px;
}
.Geeks div:nth-of-type(2) {
flex-basis: 50%;
}
.Geeks div:nth-of-type(3) {
flex-basis: auto;
}
.Geeks div:nth-of-type(4) {
flex-basis: initial;
}
.Geeks div:nth-of-type(5) {
flex-basis: inherit;
}
</style>
</head>
<body>
<center>
<h1>
The flex-basis Property
</h1>
<div class = "Geeks">
<div style = "background-color:green;">
number 80px
</div>
<div style = "background-color:lightgreen;">
percentage
</div>
<div style = "background-color:green;">
auto
</div>
<div style = "background-color:lightgreen;">
initial
</div>
<div style = "background-color:green;">
inherit
</div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<style>
.Geeks {
width: 560px;
height: 100px;
border: 1px solid black;
display: flex;
}
.Geeks div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 80px;
}
.Geeks div:nth-of-type(2) {
flex-basis: 200px;
}
.Geeks div:nth-of-type(5) {
flex-basis: 120px;
}
h3{
color:Green;
}
</style>
</head>
<body>
<center>
<h1>
The flex-basis Property
</h1>
<div class = "Geeks">
<div style="background-color:green">
80px
</div>
<div style="background-color:lightgreen">
GeeksforGeeks <br>200px
</div>
<div style="background-color:green">
80px
</div>
<div style="background-color:lightgreen">
80px
</div>
<div style="background-color:green">
120px
</div>
</div>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con la propiedad flex-basis se enumeran a continuación:
- Google Chrome 29.0, 21.0 -webkit-
- Internet Explorer 11.0
- Mozilla 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