manual de referencia CSS

reglas CSS @

大全 de propiedades CSS

CSS3 flex-Atributo direction CSS3 Atributo flex

CSS3 flex-método de uso y ejemplo de la propiedad basis

flex-valor inicial base especificado por la propiedad CSS de elemento elástico

La tabla a continuación proporciona la descripción de uso y el historial de versiones de este atributo, así como la sintaxis de uso en el script de JavaScript.

Valor predeterminado:	auto
Aplíquese a:	Elementos flexibles
Herencia:	no
Animable:	es.Consulte Atributos de animación.
Versión:	CSS3nueva característica
JavaScript sintaxis:	object.style.flexBasis="180px"

flex-Sintaxis de uso de basis

La sintaxis de este atributo es la siguiente:

flex-basis:　width　|　auto　|　initial　|　inherit

Los siguientes ejemplos muestran cómo usar flex-Atributo basis.

Ejemplo

.flex-container　{
　　　　display:　flex;　　　　　　
}　
.item1　{
　　　　background:　#ff80c0;
　　　　-webkit-flex-basis:　300px;　/*　Safari　6.1+　*/
　　　　flex-basis:　300px;
}
.item2　{
　　　　background:　#8080ff;
　　　　-webkit-flex-basis:　30%;　/*　Safari　6.1+　*/
　　　　flex-basis:　30%;
}
.item3　{
　　　　width:　120px;
　　　　background:#0080ff;
}

Prueba aquí‹/›

Valor del atributo

La tabla a continuación describe los valores de este atributo.

Valor	Descripción
width	Longitud expresada en unidades absolutas o relativas, utilizada para especificar la longitud inicial del elemento flexible. Los valores negativos no son válidos.
auto	El ancho del elemento flexible es igual a suwidthEl valor del atributo. Si el width no se especifica para el elemento flexible, el ancho dependerá de su contenido. Este es el valor predeterminado.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, los elementos relacionados adoptan el flex del elemento padre-Valores del atributo basis.

Compatibilidad del navegador

flex-La compatibilidad del navegador del atributo basis, los números en la tabla a continuación indican la versión mínima del navegador que admite esta propiedad; todos los navegadores principales admiten esta propiedad.

	Firefox 18+ ^-moz-,28 Google Chrome 21+ ^-webkit-,29 Internet Explorer 10+ ^-ms-,11 Apple Safari 6.1+ ^-webkit- Opera 12.1+

Leer más

Consulte la siguiente guía:CSS3Diseño de multicolumnas.

Propiedades relacionadas:align-content,align-items,align-self,display,flex,flex-direction,flex-flow,flex-grow,flex-shrink,flex-wrap,justify-content,min-height,min-width,order.

CSS3 flex-Atributo direction CSS3 Atributo flex