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-basis/index.html | 280 +++++++++++++++++++++++++++++++++ 1 file changed, 280 insertions(+) create mode 100644 files/es/web/css/flex-basis/index.html (limited to 'files/es/web/css/flex-basis/index.html') diff --git a/files/es/web/css/flex-basis/index.html b/files/es/web/css/flex-basis/index.html new file mode 100644 index 0000000000..726241615a --- /dev/null +++ b/files/es/web/css/flex-basis/index.html @@ -0,0 +1,280 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - Cajas Flexibles de CSS + - Propiedad de CSS +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad de CSS flex-basis especifíca la base flexible, la cual es el tamaño inicial de un elemento flexible. Ésta propiedad determina el tamaño de una caja de contenidos a no ser que se haya especificado de otra forma usando {{Cssxref("box-sizing")}}.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Especificar <'width'> */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* Palabras clave de dimensionamiento intrínseco */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* Tamaño automático basado en el contenido del elemento flexible */
+flex-basis: content;
+
+/* Global values */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

Valores

+ +
+
width
+
Definido por un número seguido de una unidad absoluta tal como px, mm o pt, o un porcentaje del tamaño principal de un contenedor flexible padre. Los valores negativos no son válidos.
+
content
+
Indica el dimensionamiento automático, basado en el contenido del elemento flexible.
+
+
Nota: Tenga en cuenta que éste valor no fue presentado en el lanzamiento inicial del Diseño de Caja Flexible, así que no será soportado por algunas implementaciones antiguas. El efecto equivalente puede tenerlo usando auto junto con un tamaño principal (width o height) en auto.
+ +
+

Nota: Breve historia

+ +
    +
  • Originalmente, "flex-basis:auto" significa "observa mi propiedad width o height".
    • +
  • Después, flex-basis:auto fue cambiado a automatic-sizing, y fue introducido "main-size" como palabra clave "observa mi propiedad width o height". Ésto fue implementado en bug 1032922.
    • +
  • Después, ese cambio fue revertido en bug 1093316, y nuevamente "auto" significa "observa mi propiedad width o height"; y se está introduciendo una nueva palabra clave 'content' para provocar un dimensionamiento automático. ({{bug("1105111")}} incluye la inclusión de dicha palabra clave).
    • +
+
+
+
+ +

Sintaxis Formal

+ +
{{csssyntax}}
+ +

Ejemplo

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: -webkit-max-content;
+  flex-basis: -moz-max-content;
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: -webkit-min-content;
+  flex-basis: -moz-min-content;
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: -webkit-fit-content;
+  flex-basis: -moz-fit-content;
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: -webkit-fill-available;
+  flex-basis: -moz-available;
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill/-webkit-fill-available/-moz-available';
+}
+
+ +

Resultados

+ +

{{EmbedLiveSample('Example', '860', '360', '', 'Web/CSS/flex-basis')}}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Definición Inicial
+ +

Compatibilidad de navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox (Gecko)ChromeInternet ExplorerEdgeOperaSafari
Soporte Base{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}11[2]1212.107.0{{property_prefix("-webkit")}}[3]
auto{{CompatGeckoDesktop("18.0")}}21.0111212.107.0{{property_prefix("-webkit")}}
content{{CompatNo}}[4]{{CompatNo}}{{CompatNo}}12{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticaFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Soporte Base{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Para acivar el soporte de caja flexible en Firefox 18 y 19, el usuario debe cambiar en preferencias about:config  en "layout.css.flexbox.enabled" a true. Firefox soporta flexbox multi-línea desde Firefox 28.

+ +

[2] Cuando no se especifíca flex-basis como auto, Internet Explorer 10-11 (pero no 12+) siempre usa el box model mediante la propiedad content-box para calcular el tamaño de un elemento flexible, incluso si se aplica al elemento la propiedad box-sizing: border-box. Ver Flexbug #7 para más información.

+ +

[3] Ver Safari 7.0.

+ +

[4] Ver {{bug("1105111")}}.

+ +

Ver también

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