From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/flex/index.html | 208 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 files/es/web/css/flex/index.html (limited to 'files/es/web/css/flex') diff --git a/files/es/web/css/flex/index.html b/files/es/web/css/flex/index.html new file mode 100644 index 0000000000..9e89e10b6b --- /dev/null +++ b/files/es/web/css/flex/index.html @@ -0,0 +1,208 @@ +--- +title: flex +slug: Web/CSS/flex +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Resumen

+ +

 

+ +

La propiedad CSS flex es una propiedad resumida que indica la capacidad de un elemento flexible para alterar sus dimensiones y llenar el espacio disponible. Los elementos flexibles pueden ser estirados para utilizar el espacio disponible proporcional a su factor de crecimiento flexible o su factor de contracción flexible para evitar desbordamiento.

+ +

{{cssinfo}}

+ +

 

+ +

Consulte Cómo usar las cajas flexibles de CSS para conocer más propiedades e información.

+ +

Sintáxis

+ +
/* 0 0 auto */
+flex: none;
+
+/* Un valor, número sin unidades: flex-grow */
+flex: 2;
+
+/* Un valor, width/height: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Dos valores: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Dos valores: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Tres valores: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Valores globales */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Valores

+ +
+
<'flex-grow'>
+
+

Define el flex-grow del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.

+
+
<'flex-shrink'>
+
Define el flex-shrink del elemento flexible. Ver { { Xref_cssnumber ( ) } } para obtener más detalles . Los valores negativos no se consideran válidos . El valor predeterminado es 1 cuando se omite.
+
<'flex-basis'>
+
Define el flex-basis del elemento flexible. Se acepta cualquier valor válido para las propiedades  width y height . Un tamaño preferente de 0 debe tener una unidad para evitar ser interpretado como flexible. El valor predeterminado es 0% cuando se omite.
+
none
+
Esta palabra clave se computa a 0 0 auto.
+
+

Sintaxis normal

+
+
+ +
{{csssyntax}}
+ +

Ejemplo

+ +
#flex-container {
+	display: -webkit-flex;
+	display: flex;
+	-webkit-flex-direction: row;
+	flex-direction: row;
+}
+
+#flex-container > .flex-item {
+	-webkit-flex: auto;
+	flex: auto;
+}
+
+#flex-container > .raw-item {
+	width: 5rem;
+}
+
+ +
<div id="flex-container">
+    <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+    <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

Resultado

+ +

{{EmbedLiveSample('Example','100%','60')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Compatibilidad de Navegadores

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}
+ {{CompatGeckoDesktop("28.0")}}[2]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}[3]
+ 11.0[3]		12.10 +

6.1{{property_prefix("-webkit")}}
+ 9.0

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] En Gecko 18.0 {{geckoRelease("18.0")}} y 19.0 {{geckoRelease("19.0")}} el soporte de cajas flexibles está oculto en las preferencias about:config en layout.css.flexbox.enabled, por defecto en false.

+ +

[2] Las cajas flexibles multi-línea están soportadas desde Gecko 28.0 {{geckoRelease("28.0")}}.

+ +

[3] Internet Explorer 10-11 (pero no 12+) ignora el uso de calc() en la parte flex-basis de la sintaxis de flex. Esto se puede solucionar mediante el uso de las propiedades normales en lugar de las abreviadas. Ver Flexbug #8 para más info. Además una declaración flex  con un valor sin unidad en su parte flex-basis es considerado sintácticamente no valido en esas versiones y por lo tanto será ignorado. Una solución consiste en incluir siempre una unidad en la parte flex-basis del valor abreviador flex. Ver Flexbug #4 para más info.

+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf