2.4 KiB
| title | localeTitle |
|---|---|
| Flex Basis Property | Propiedad de base de Flex |
Base de Flexión
flex-basis propiedad de flex-basis define el tamaño del flex-item largo del eje principal del contenedor flexible. El eje principal es horizontal si flex-direction se establece en row y será vertical si la propiedad de la flex-direction se establece en column .
Sintaxis
flex-basis: auto | content | <width> | <height>;
base flexible: auto
flex-basis: auto busca flex-basis: auto el tamaño principal del elemento y define el tamaño. Por ejemplo, en un contenedor flexible horizontal, auto buscará el width y la height si el eje del contenedor es vertical.
Si no se especifica ningún tamaño, el modo auto volverá al content .
base flexible: contenido
flex-basis: content resuelve el tamaño en función del contenido del elemento, a menos que el width o la height se establezcan a través box-sizing normal de la box-sizing .
En ambos casos, donde flex-basis es auto o content , si se especifica el tamaño principal, ese tamaño tendrá prioridad.
base flexible
Esto es solo para especificar el width o el height , pero solo es más flexible. flex-basis: 20em; establecerá el tamaño inicial del elemento a 20em . Su tamaño final se basará en el espacio disponible, múltiplo de flex-grow flex-shrink múltiplo de flex-shrink .
La especificación sugiere el uso de propiedades abreviadas de flex . Esto ayuda a escribir flex-basis junto con las propiedades de flex-grow y flex-shrink .
Ejemplos
Aquí hay filas de contenedores flexibles individuales y elementos flexibles individuales que muestran cómo flex-basis afecta el box-sizing la box-sizing .
Cuando la flex-direction es column , la misma flex-basis controlará la propiedad de height . Un ejemplo a continuación,
Más información:
Referencias adicionales en las siguientes páginas:
- Especificación CSS nivel 1
- Página de la Red de Desarrolladores de Mozilla en base flexible