diff options
Diffstat (limited to 'files/es/web/css/css_flexible_box_layout')
7 files changed, 1386 insertions, 0 deletions
diff --git a/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..154480239b --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,231 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +tags: + - Align + - CSS + - Flex + - Guía + - Tutorial + - align-content + - align-self + - alineación + - alinear + - flexbox + - justify + - justify-content + - rejillas +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +<p>{{CSSRef}}</p> + +<p class="summary">Una de las razones por las que flexbox atrajo rápidamente el interés de los desarrolladores web es que por primera vez en la web se ha conseguido unas posibilidades completas de alineamiento de elementos. Se habilita la alineación vertical, de modo que por fin existe una manera rápida y facil de centrar una caja. A lo largo de esta guía, vamos a desarrollar un exhaustivo recorrido sobre el funcionamiento de las propiedades de alineamiento y justificación en Flexbox.</p> + +<p><span class="tlid-translation translation"><span title="">Para centrar nuestra caja, usamos la propiedad align-items para alinear nuestro artículo en el eje transversal, que en este caso es el eje del bloque que se ejecuta verticalmente.</span> <span title="">Utilizamos justify-content para alinear el elemento en el eje principal, que en este caso el eje en línea se ejecuta horizontalmente.</span></span></p> + +<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p> + + + +<p><span class="tlid-translation translation"><span title="">Puedes echar un vistazo al código de este ejemplo a continuación.</span> <span title="">Cambia el tamaño del contenedor o elemento anidado y el elemento anidado siempre permanece centrado.</span></span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p> + +<h2 id="Propiedades_que_controlan_la_alineación."><span class="tlid-translation translation"><span title="">Propiedades que controlan la alineación.</span></span></h2> + +<p><span class="tlid-translation translation"><span title="">Las propiedades que veremos en esta guía son las siguientes.</span></span></p> + +<ul> + <li>{{cssxref("justify-content")}} — <span class="tlid-translation translation"><span title="">controla la alineación de todos los elementos en el eje principal.</span></span></li> + <li>{{cssxref("align-items")}} — <span class="tlid-translation translation"><span title="">controla la alineación de todos los elementos en el eje transversal.</span></span></li> + <li>{{cssxref("align-self")}} — <span class="tlid-translation translation"><span title="">controla la alineación de un elemento flexible individual en el eje transversal.</span></span></li> + <li>{{cssxref("align-content")}} — <span class="tlid-translation translation"><span title="">descrito en la especificación como para "empaquetar líneas flexibles";</span> <span title="">Controla el espacio entre las líneas de flexión en el eje transversal.</span></span></li> +</ul> + +<p><span class="tlid-translation translation"><span title="">También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox</span></span></p> + +<div class="note"> +<p><span class="tlid-translation translation"><span title="">Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación</span></span> — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. <span class="tlid-translation translation"><span title="">Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.</span></span></p> +</div> + +<h2 id="El_eje_transversal"><span class="tlid-translation translation"><span title="">El eje transversal</span></span></h2> + +<p><span class="tlid-translation translation"><span title="">Las propiedades </span></span><code>align-items</code><span class="tlid-translation translation"><span title=""> y </span></span><code>align-self</code><span class="tlid-translation translation"><span title=""> controlan la alineación de nuestros elementos flexibles en el eje transversal, en filas si </span></span><code>flex-direction</code><span class="tlid-translation translation"><span title=""> se encuentra en row ó en columnas si </span></span><code>flex-direction se encuentra en</code><span class="tlid-translation translation"><span title=""> column.</span><br> + <br> + <span title="">Estamos haciendo uso de la alineación del eje transversal en el ejemplo de flexión más simple.</span> <span title="">Si agregamos display: flex a un contenedor, todos los elementos secundarios se convierten en elementos flexibles organizados en una fila.</span> <span title="">Todos se estirarán para ser tan altos como el elemento más alto, ya que ese elemento define la altura de los elementos en el eje transversal.</span> <span title="">Si su contenedor flexible tiene una altura establecida, entonces los elementos se extenderán a esa altura, independientemente de la cantidad de contenido en el elemento.</span></span></p> + +<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p> + +<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p> + + + +<p>La razón por la que los elementos se convierten en la misma altura es que el valor inicial de <code>align-items</code>, la propiedad que controla la alineación en el eje transversal, se establece en <code>stretch</code>.</p> + +<p>Podemos usar otros valores para controlar como se alinean los items:</p> + +<ul> + <li><code>align-items: flex-start</code></li> + <li><code>align-items: flex-end</code></li> + <li><code>align-items: center</code></li> + <li><code>align-items: stretch</code></li> + <li><code>align-items: baseline</code></li> +</ul> + +<p>En el ejemplo en vivo a continuación, el valor de <code>align-items</code> is <code>stretch</code>. Pruebe los otros valores y vea cómo todos los elementos se alinean entre sí en el contenedor flexible.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p> + +<h3 id="Alineando_un_item_individual_con_align-self">Alineando un item individual con align-self</h3> + +<p>La propiedad align-items establece la propiedad align-self en todos los elementos flexibles como un grupo. Esto significa que puede declarar explícitamente la propiedad <code>align-self </code>para apuntar a un solo elemento. La propiedad<code> align-self </code>acepta todos los mismos valores que <code>align-items</code>, además del valor <code>auto</code>, que restablecerá el valor a lo que esté definido en el contenedor flex o flexible..</p> + +<p>En este siguiente ejemplo en vivo, el contenedor flex tiene el elemento de alineación:<code> flex-start</code>, lo que significa que todos los elementos están alineados con el inicio del eje transversal. En este caso se dirige al primer elemento utilizando un selector <code>first-child</code>, y se configuró con la propiedad: <code>strecth</code>; otro elemento ha sido alineado, utilizando su clase <code>selected </code> y dando valor a la propiedad <code> align-self: center</code>. Puede cambiar el valor de a<code>lign-items</code> o cambiar los valores de <code>align-self</code> en los elementos individuales para ver cómo funciona esto.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p> + +<h3 id="Cambiando_el_eje_principal">Cambiando el eje principal</h3> + +<p>Hasta ahora hemos examinado el comportamiento cuando nuestra <code>flex-direction</code> es <code>row</code>, y mientras trabajamos en un lenguaje escrito de arriba a abajo. Esto significa que el eje principal corre a lo largo de la fila horizontalmente, y nuestra alineación del eje transversal mueve los elementos hacia arriba y hacia abajo.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p> + +<p>Si cambiamos nuestra <code>flex-direction</code> a columna, <code>align-items</code> y <code>align-self</code> van a alinear los items a la derecha y a la izquierda.</p> + +<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p> + +<p>Puede probarlo con el siguiente ejemplo, que tiene un contenedor flexible, con <code>flex-direction: column </code>, y que de lo contrario seria exactamente igual al ejemplo anterior. .</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p> + +<h2 id="Alineando_el_contenido_en_el_eje_transversal_la_propiedad_align-content">Alineando el contenido en el eje transversal: la propiedad align-content</h2> + +<p>Hasta ahora hemos estado alineando los elementos, o un elemento individual dentro del área definida por el contenedor flexible. Si tiene un contenedor flexible de varias líneas envuelto, también puede usar la propiedad <code>align-content</code> para controlar la distribucion del espacio entre las filas. En la especificación, esto se describe como <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">empaquetamiento de lineas flexibles</a>.</p> + +<p>Para que <code>align-content</code> funcione necesita una mayor altura en su contenedor flexible que la que requiere para mostrar los items. A partir de ahi el tratara a todos los items como un conjunto, para determinar que sucede con ese espacio libre y y la alineacion de todo el conjunto de elementos que contiene. </p> + +<p>La propiedad <code>align-content</code> acepta los siguientes valores:</p> + +<ul> + <li><code>align-content: flex-start</code></li> + <li><code>align-content: flex-end</code></li> + <li><code>align-content: center</code></li> + <li><code>align-content: space-between</code></li> + <li><code>align-content: space-around</code></li> + <li><code>align-content: stretch</code></li> + <li><code>align-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>En el ejemplo en vivo siguiente, el contenedor flexible, tiene una altura de 400 pixels, lo cual es mas de lo que necesita para mostrar nuestros items. El valor de <code>align-content</code> lo que significa que el espacio disponible es compartido entre las lineas flexibles que estan colocadas al ras al inicio y al final del contenedor en el eje transversal. </p> + +<p>Pruebe con otros valores para ver como la propiedad <code>align-content</code> funciona.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p> + +<p>Una vez mas podemos cambiar nuestra <code>flex-direction</code> a <code>column</code> para ver como esta propieda se comporta cuando trabajamos con columnas. Al igual que antes necesitamos suficiente espacio en el eje transversal para dejar algun espacio libre despues de mostrar todos los items </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p> + +<div class="note"> +<p><strong>Nota</strong>: El valor <code>space-evenly</code> no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.</p> +</div> + +<p>Revise la <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">documentacion para <code>justify-content</code> en MDN</a> para encontrar más detalles de todos sus valores y el soporte de los navegadores.</p> + +<h2 id="Alineando_contenido_en_el_eje_principal">Alineando contenido en el eje principal</h2> + +<p>Ahora que hemos visto como funciona la alineacion en el eje transversal, podemos echar una mirada al eje principal. Aquí solo tendremos una propiedad disponible disponible — <code>justify-content</code>. Esto se debe a que solo podemos trabajar con los items como grupos en el eje principal. Con <code>justify-content</code> controlamos que sucede con el espacion disponible, en caso de que haya más espacio del que se necesita para mostrar los items </p> + +<p>En nuestro ejemplo inicial con <code>display: flex</code> en el contenedor, los items se muestran como una fila y todos se alinean al inicio del contenedor. Esto se debe a que el valor inicial de <code>justify-content </code>es <code>flex-star</code>t. Cualquier espacio disponible se coloca al final de los elementos.</p> + +<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>La propiedad <code>justify-content</code> accepta el mismo valor que <code>align-content</code>.</p> + +<ul> + <li><code>justify-content: flex-start</code></li> + <li><code>justify-content: flex-end</code></li> + <li><code>justify-content: center</code></li> + <li><code>justify-content: space-between</code></li> + <li><code>justify-content: space-around</code></li> + <li><code>justify-content: stretch</code></li> + <li><code>justify-content: space-evenly</code> (not defined in the Flexbox specification)</li> +</ul> + +<p>En el ejemplo a continuacion el valor de <code>justify-content</code> es <code>space-between</code>. El espacio disponible despues de mostrar los items es distribuido entre estos. El elemento izquierdo y derecho se alinea al ras con el inicio y el final.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} </p> + +<p>Si el eje principal esta en direccion bloque porque <code>flex-direction</code> tiene valor <code>column</code>, entonces <code>justify-content</code> distribuira el espacio entre items, en la misma medida que el posee el espacio en el contenedor flex para ser distribuida, o sea siempre que haya espacio en el contenedor para distribuir. </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p> + +<h3 id="Modos_de_Alineación_y_escritura">Modos de Alineación y escritura</h3> + +<p>Recuerda que con todos estos metodos de alineación los valores de <code>flex-start</code> y <code>flex-end</code> son escritos en modo consciente. Si el valor de <code>justify-content</code> es <code>start</code> y el modo de escritura es izquierda a derecha, como en español o ingles, los elementos se alinearán comenzando en el lado izquierdo del contenedor</p> + +<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Sin embargo si el modo de escritura es de derecha a izquierda como en arabe, los elementos o items se alinearán en el extremo derecho del contenedor.</p> + +<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>El ejemplo siguiente tiene la propiedad <code>direction</code> con valor <code>rtl</code> para forzar a los elementos a colocarse de derecha a izquierda. Puedes eliminarlo o cambiar los valores de <code>justify-content</code> para ver como flexbox se comporta cuando el inicio de la direccion dentro de la linea, es a la derecha. </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p> + +<h2 id="Alineacíon_y_flex-direction">Alineacíon y flex-direction</h2> + +<p>La linea de inicio también cambiará si cambias la propiedad <code>flex-direction</code> — por ejemplo usando <code>row-reverse</code> en vez de <code>row</code>.</p> + +<p>En el ejemplo siguiente tengo items dispuestos con <code>flex-direction: row-reverse</code> y <code>justify-content: flex-end</code>. En lenguaje de izquierda a derecha, estos elementos se alinearan a la izquierda. Prueba a cambiar <code>flex-direction: row-reverse</code> a <code>flex-direction: row</code>. Veras como los elementos ahora se mueven a la derecha. </p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p> + +<p>Considerando que esto puede ser algo confuso, la regla a tener en cuenta es que a no ser que hagas algo para cambiarlo, los items flexible se alinean en la misma direccion que las palabras se ordenan linealmente en el lenguaje de tu documento a lo largo de la linea. <code>flex-start</code> comenzará donde el inicio de la oracion debe comenzar. </p> + +<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Puedes cambiarlo para que aparezcan en dirección de bloque, para el lenguaje de tu documento, seleccionando <code>flex-direction: column</code>. Luego <code>flex-start</code> estará donde la parte superior del primer parrafo de texto comenzaria. </p> + +<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<p>Si cambias flex-direction a uno de los valores inversos, entonces se distribuirán desde el eje final y en el orden inverso a la forma en que se escriben las palabras en el idioma de su documento. <code>flex-start</code> cambiará al final de ese eje — por lo tanto, a la ubicación donde se ajustarán sus líneas si trabaja en filas, o al final de su último párrafo de texto, en la dirección en bloque.</p> + +<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p> + +<h2 id="Usando_auto_margenes_para_la_alineación_en_el_eje_principal">Usando auto margenes para la alineación en el eje principal </h2> + +<p>No tenemos una propiedad <code>justify-items</code> o <code>justify-self</code> disponible en el eje principal para nuestros items, ya que estos son tratados como un grupo en este eje. Sin embargo es posible realizar cierta alineación individual, para separar un elemento o un grupo de elementos de otros, usando automargenes, o margenes automaticos con flebox. </p> + +<p>Un patrón común es una barra de navegación donde algunos elementos clave se alinean a la derecha, con el grupo principal a la izquierda. Podría pensarse que este debería ser un caso de uso para una propiedad de <code>justify-self</code> , sin embargo, considere la imagen a continuación. Tengo tres artículos en un lado y dos en el otro. Si pudiera usar <code>justify-self</code> en el elemento <em>d</em>, también cambiaría la alineación del artículo <em>e</em> que sigue, lo cual puede o no ser mi intención.</p> + +<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> + +<p>En cambio podemos enfocarnos en el item 4 y separarlo de los tres primeros elementos dandole a este un valor al <code>margin-left</code> de <code>auto</code>. El auto margen tomará todo el espacio que puedan en su eje — así es como funciona el centrado de un bloque con los margenes automáticos a derecha e izquierda. Cada lado trata de ocupar tanto espacio como puede, y así el bloque se empuja hacia el medio.</p> + +<p>En este ejemplo en vivo, tenemos elementos flexibles, organizados simplemente en una fila con los valores básicos de flexión, y la clase <code> push</code> tiene <code>margin-left: auto</code>. Puedes intentar eliminarlo o agregar la clase a otro elemento para ver cómo funciona.</p> + + + +<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p> + +<h2 id="Futuras_caracteristicas_de_alineación_para_Flexbox">Futuras caracteristicas de alineación para Flexbox</h2> + +<p>Al principio de este artículo, expliqué que las propiedades de alineación actualmente contenidas en la especificación de flexbox de Nivel 1 también se incluyen en el Nivel de Alineación de Casillas 3, que puede extender estas propiedades y valores en el futuro. Ya hemos visto un lugar donde esto ha sucedido, con la introducción del <code>space-evenly</code> para las propiedades de <code>align-content</code> y <code>justify-content</code>.</p> + +<p> El módulo de alineación de cuadro también incluye otros métodos para crear espacio entre elementos, como la función de <code>column-gap</code> y <code>ow-gap</code>, como se ve en el <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout"> Diseño de rejillas de CSS</a>. La inclusión de estas propiedades en la Alineación de cajas significa que en el futuro también deberíamos poder utilizar <code>column-gap</code> y <code>row-gap</code> tambien en diseños flexibles. Esto significará que no tendremos que usar márgenes para espaciar los elementos flexibles.</p> + +<p> Mi sugerencia al explorar en profundidad la alineación de flexbox es hacerlo conjuntamente con la alineación en Diseño de rejillas. Ambas especificaciones utilizan las propiedades de alineación que se detallan en la especificación de Alineación de cajas. Puede ver cómo se comportan estas propiedades cuando se trabaja con una cuadrícula en el artículo de MDN <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Alineación de cajas</a> , y también he comparado cómo funciona la alineación en estas especificaciones en mi <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Hoja de trucos de alineacion de cajas</a>.</p> + + + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment">Alineación de cajas</a></li> + <li> <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox">Alineación en Flexbox</a></li> + <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout">Alineación de cajs en Diseño de rejillas</a></li> +</ul> diff --git a/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..ca416812f3 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,112 @@ +--- +title: Compatibilidad con versiones anteriores de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary"><span class="notranslate">Flexbox es muy compatible con los navegadores modernos, sin embargo, hay algunos problemas con los que puede encontrarse.</span> <span class="notranslate"> En esta guía, veremos qué tan bien se admite flexbox en los navegadores, y veremos algunos posibles problemas, recursos y métodos para crear soluciones y fallos.</span></p> + +<h2 id="La_historia_de_flexbox"><span class="notranslate">La historia de flexbox</span></h2> + +<p><span class="notranslate">Al igual que con todas las especificaciones CSS, la especificación Flexbox experimentó una gran cantidad de cambios antes de convertirse en la Recomendación de Candidato que tenemos hoy.</span> <span class="notranslate"> Como recomendación de un candidato, no deberíamos ver grandes cambios en este punto de la especificación, sin embargo, este no ha sido el caso con las iteraciones anteriores de flexbox.</span></p> + +<p><span class="notranslate">Flexbox se implementó de forma experimental en varios navegadores web.</span> <span class="notranslate"> En ese momento, el método para crear implementaciones experimentales era utilizar un prefijo de proveedor.</span> <span class="notranslate"> La idea de estos prefijos era permitir que las implementaciones de la especificación fueran probadas y exploradas por ingenieros de navegadores y desarrolladores web por igual sin chocar con otras implementaciones.</span> <span class="notranslate"> La idea no era utilizar las implementaciones experimentales en el código de producción.</span> <span class="notranslate"> Sin embargo, los prefijos finalmente se usaron en el código de producción, y los cambios en la especificación experimental hicieron que las personas necesitaran actualizar sus sitios para mantenerse al día.</span></p> + +<p><span class="notranslate"><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgJrJ-4Kq-8QScbSc51wpTjPm82pg" rel="noopener">En 2009</a> , la especificación se veía bastante diferente.</span> <span class="notranslate"> Para crear un contenedor flexible, usaría <code>display: box</code> y había una serie de propiedades <code>box-*</code> , que hicieron cosas que reconocerá hoy en flexbox.</span></p> + +<p><span class="notranslate">Hubo una <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhicnum0sG8w9q_jY-H3SvbkxBPHwQ" rel="noopener">actualización de la especificación</a> que actualizó la sintaxis para <code>display: flexbox</code> : esto fue nuevamente prefijado por el proveedor.</span></p> + +<p><span class="notranslate">Finalmente, la especificación se actualizó para definir <code>display: flex</code> como la forma de crear un contenedor de flex.</span> <span class="notranslate"> El soporte del navegador para la versión actualizada de la especificación es excelente a partir de este momento.</span></p> + +<p><span class="notranslate">Existen algunos artículos antiguos que hacen referencia a las versiones anteriores de flexbox, que son bastante fáciles de identificar debido al cambio en la forma en que se crea un contenedor flexible.</span> <span class="notranslate"> Si encuentra algo que se refiere a <code>display: box</code> o <code>display: flexbox</code> esta es información desactualizada.</span></p> + +<h2 id="Estado_en_navegadores"><span class="notranslate">Estado en navegadores</span></h2> + +<p><span class="notranslate">La compatibilidad del navegador para flexbox es excelente, y la mayoría de los navegadores no necesitan un prefijo en este momento.</span> <span class="notranslate"> Safari fue el último de los principales navegadores en eliminar los prefijos, con el lanzamiento de Safari 9 en 2015. Los dos navegadores que aún debe tener en cuenta para la compatibilidad entre navegadores son:</span></p> + +<ul> + <li><span class="notranslate">Internet Explorer 10, que implementó la versión <code>display: flexbox</code> de la especificación con el prefijo <code>-ms-</code> .</span></li> + <li><span class="notranslate">UC Browser, que aún admite la versión 2009 <code>display: box</code> versión de <code>display: box</code> solo con el prefijo <code>-webkit-</code> .</span></li> +</ul> + +<p><span class="notranslate">Tenga en cuenta también que Internet Explorer 11 es compatible con la <code>display: flex</code> moderna <code>display: flex</code> especificación <code>display: flex</code> sin embargo, tiene una serie de errores en la implementación.</span></p> + +<h2 id="Problemas_comunes"><span class="notranslate">Problemas comunes</span></h2> + +<p><span class="notranslate">La mayoría de los problemas con flexbox se relacionan con los cambios en la especificación, tal como se ha desarrollado, y el hecho de que muchos de nosotros intentamos usar una especificación experimental en la producción.</span> <span class="notranslate"> Si está tratando de garantizar la compatibilidad con versiones anteriores de los navegadores, y en particular IE10 y 11, el sitio <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://github.com/philipwalton/flexbugs&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjo_N9xnO5hhxBBK9uIQrirvCNcew" rel="noopener">Flexbugs</a> es un recurso útil.</span> <span class="notranslate"> Verá que muchos de los errores enumerados se aplican a las versiones antiguas del navegador y se corrigen en los navegadores actuales.</span> <span class="notranslate"> Cada uno de los errores tiene una solución alternativa que puede ahorrarle muchas horas de desconcierto.</span></p> + +<p><span class="notranslate">Si desea incluir navegadores muy antiguos con soporte de flexbox, puede incluir los prefijos de proveedor en su CSS además de la versión no prefijada.</span> <span class="notranslate"> Esto se está volviendo cada vez menos un requisito hoy en día, ya que el apoyo es generalizado.</span> <code> </code></p> + +<pre class="brush: css">.wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +}</pre> + +<p><span class="notranslate"><a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://autoprefixer.github.io/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgUf9PulOznp3VQPaivCYCaHK66Kw" rel="noopener">Autoprefixer Online</a> es una forma útil de ver qué prefijos se recomiendan, dependiendo de cuántas versiones desee volver con el soporte del navegador.</span> <span class="notranslate"> También puede consultar <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://caniuse.com/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhg8XWV2r6QkTzw5qCNTnuJp_Y5C_g#feat=flexbox" rel="noopener">¿Puedo usar?</a> Para obtener información sobre cuándo se eliminaron los prefijos en los navegadores para tomar su decisión.</span></p> + +<h2 id="Técnicas_de_respaldo_útiles"><span class="notranslate">Técnicas de respaldo útiles</span></h2> + +<p><span class="notranslate">Dado que el uso de flexbox se inicia con el valor de la propiedad de <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/display&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgSinAc_I4iXIR_wMxppck0UYRiAQ" title="La propiedad de visualización de CSS define el tipo de visualización de un elemento, que consta de las dos cualidades básicas de cómo un elemento genera cuadros: el tipo de visualización externa que define cómo participa el cuadro en el diseño de flujo y el tipo de visualización interna que define cómo los hijos de caja se presentan."><code>display</code></a> , cuando se necesita admitir navegadores muy antiguos que no admiten flexbox en absoluto, se pueden crear fallos sobrescribiendo un método de diseño con otro.</span> <span class="notranslate"> La especificación define lo que sucede si usa otros métodos de diseño en un elemento que luego se convierte en un elemento flexible.</span></p> + +<h3 id="Floated_items">Floated items</h3> + +<blockquote> +<p><span class="notranslate">"Flotar y despejar no crea flotación o espacio libre del elemento flexible, y no lo saque del flujo". <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/css-flexbox-1/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjDp2CbMhmsn5qPNrWItombb2edTA#flex-containers" rel="noopener">3. Contenedores flexibles</a></span></p> +</blockquote> + +<p><span class="notranslate">En el siguiente ejemplo en vivo, floté dos bloques y luego configuré <code>display: flex</code> en el contenedor.</span> <span class="notranslate"> Los artículos ahora son artículos flexibles, lo que significa que se estiran a la misma altura.</span> <span class="notranslate"> Cualquier comportamiento de flotación no se aplica.</span></p> + +<p><span class="notranslate">Puede probar el comportamiento alternativo eliminando <code>display: flex</code> del contenedor.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> + +<h3 id="display_inline-block">display: inline-block</h3> + +<p><span class="notranslate">Una vez que un elemento de <code>inline-block</code> convierte en un elemento flexible, se <code>block</code> y, por lo tanto, el comportamiento de la <code>display: inline-block</code> como preservar el espacio en blanco entre elementos ya no se aplica.</span></p> + +<p><span class="notranslate">Eliminar <code>display: flex</code> para ver el comportamiento de reserva.</span> <span class="notranslate"> Verá un espacio en blanco agregado entre los elementos, que es lo que sucede cuando se usa <code>display: inine-block</code> ya que prefiere el espacio en blanco como otros elementos en línea.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> + +<h3 id="display_table-">display: table-<em> </em></h3> + +<p><span class="notranslate">Las propiedades de visualización de la tabla CSS son potencialmente muy útiles como respaldo, debido al hecho de que permiten patrones de diseño como columnas de altura completa y centrado vertical y funcionan hasta Internet Explorer 8.</span></p> + +<p><span class="notranslate">Si usa <code>display: table-cell</code> en un elemento en su HTML, toma el estilo de una celda de tabla HTML.</span> <span class="notranslate"> CSS crea cuadros anónimos para representar estos elementos para que no necesite envolver cada elemento en un contenedor para representar la fila de la tabla HTML, y un segundo para representar el elemento de la tabla en sí. No puede ver ni diseñar estos cuadros anónimos;</span> <span class="notranslate"> Están allí para arreglar el árbol.</span></p> + +<p><span class="notranslate" style="background-color: #e6ecf9;">Si luego declara <code>display: flex</code> en el elemento principal, estos cuadros anónimos no se crean y, por lo tanto, su elemento sigue siendo un elemento secundario directo y puede convertirse en un elemento flexible, perdiendo cualquiera de las funciones de visualización de la tabla.</span></p> + +<blockquote> +<p><span class="notranslate">“Nota: algunos valores de visualización normalmente desencadenan la creación de cuadros anónimos alrededor del cuadro original.</span> <span class="notranslate"> Si dicha caja es un elemento flexible, primero se bloquea y, por lo tanto, no se creará una caja anónima.</span> <span class="notranslate"> Por ejemplo, dos elementos flexibles contiguos con pantalla: table-cell se convertirán en dos pantallas separadas: elementos flexibles de bloque, en lugar de estar envueltos en una sola tabla anónima. "- <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://www.w3.org/TR/css-flexbox-1/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhjDp2CbMhmsn5qPNrWItombb2edTA#flex-items" rel="noopener">4. Elementos Flexibles</a></span></p> +</blockquote> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> + +<h3 id="The_vertical-align_property">The vertical-align property</h3> + +<p><span class="notranslate">El siguiente ejemplo en vivo demuestra el uso de la propiedad de <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhgr6-d_RsAVtumplNGhUEUMAo35sQ" title="La propiedad CSS de alineación vertical establece la alineación vertical de un cuadro en línea o de celda de tabla."><code>vertical-align</code></a> junto con <code>display: inline-block</code> .</span> <span class="notranslate"> Tanto <code>display: table-cell</code> como <code>display: inline-block</code> permiten el uso de esta propiedad.</span> <span class="notranslate"> El uso de <code>vertical-align</code> vertical permite la alineación vertical antes de flexbox.</span> <span class="notranslate"> Flexbox ignora la propiedad, por lo que puede usarla junto con <code>display: table-cell</code> o <code>display: inline-block</code> como respaldo y luego usar de forma segura las propiedades de alineación de caja en flexbox.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> + +<h2 id="Consultas_de_funciones_y_flexbox"><span class="notranslate">Consultas de funciones y flexbox</span></h2> + +<p><span class="notranslate">Puede usar <a href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://developer.mozilla.org/en-US/docs/Web/CSS/%2540supports&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhici5EQces8PvRioklpq77xc2SfEA">consultas de funciones</a> para detectar la compatibilidad con flexbox:</span></p> + +<pre class="brush: css">@supports (display: flex) { + // code for supporting browsers +}</pre> + +<p><span class="notranslate">Tenga en cuenta que Internet Explorer 11 no admite consultas de funciones, pero <em>sí</em> admite flexbox.</span> <span class="notranslate"> Si decide que la implementación de IE11 es demasiado defectuosa y desea servirle el diseño alternativo, entonces podría usar consultas de características para servir las reglas de flexbox solo a aquellos navegadores con un buen soporte de flexbox.</span> <span class="notranslate"> Recuerde que si desea incluir versiones de navegadores que tengan flexbox prefijado por el proveedor, deberá incluir la versión prefijada en su consulta de características.</span> <span class="notranslate"> La siguiente consulta de características incluiría UC Browser, que admite consultas de características y sintaxis antigua de flexbox, con el prefijo:</span></p> + +<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) { + // code for supporting browsers +}</pre> + +<p><span class="notranslate">Para obtener más información sobre el uso de consultas de características, consulte <a class="external" href="https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&sp=nmt4&tl=es&u=https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/&xid=17259,15700019,15700186,15700190,15700256,15700259,15700262,15700265,15700271,15700280,15700283&usg=ALkJrhhjVsZfMKM6WW4F60-6U_P7RNoSjg" rel="noopener">Uso de consultas de características en CSS</a> en el blog Mozilla Hacks.</span></p> + +<h2 id="Conclusión"><span class="notranslate">Conclusión</span></h2> + +<p><span class="notranslate">Si bien pasé algún tiempo en esta guía analizando posibles problemas y retrocesos, flexbox está muy listo para que lo use en el trabajo de producción.</span> <span class="notranslate"> Esta guía lo ayudará en aquellos casos en los que encuentre un problema o tenga el requisito de admitir navegadores antiguos.</span></p> diff --git a/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html new file mode 100644 index 0000000000..9048cbb739 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/casos_de_uso_tipicos_de_flexbox/index.html @@ -0,0 +1,133 @@ +--- +title: Casos de uso típicos de Flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Casos_de_uso_tipicos_de_Flexbox. +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +<p>{{CSSRef}}</p> + +<p class="summary">En esta guía, analizaremos algunos de los casos de uso comunes de flexbox, en aquellos lugares donde tiene más sentido que otro método de diseño.</p> + +<h2 id="¿Por_qué_elegir_flexbox">¿Por qué elegir flexbox?</h2> + +<p>En un mundo perfecto de compatibilidad con navegadores, la razón por la que elegiría utilizar flexbox es porque desea colocar una colección de elementos en una dirección u otra. Estos son los usos para los que fue diseñado flexbox. Puede leer más sobre la diferencia entre flexbox y CSS Grid Layout en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relación de Flexbox con respecto a otros métodos de diseño</a>, donde discutimos cómo encaja flexbox en la imagen general de CSS Layout.</p> + +<p>En realidad, a menudo también usamos Flexbox para trabajos que Grid Layout podría realizar mejor, como un respaldo para Grid, y también para obtener capacidades de alineación. Esto es algo que puede cambiar una vez que se implemente Box Alignment en Block Layout. En esta guía analizo algunas de las cosas típicas que podría usar flexbox hoy día.</p> + +<h2 id="Navegación">Navegación</h2> + +<p>Un patrón común para la navegación es tener una lista de elementos mostrada como una barra horizontal. Este patrón, tan básico como parece, era difícil de lograr antes de flexbox. Este es el ejemplo más simple de flexbox, y podría considerarse el caso ideal de uso de flexbox.</p> + +<p>Cuando tenemos un conjunto de elementos que queremos mostrar horizontalmente, podemos terminar con espacio adicional. Necesitamos decidir qué hacer con ese espacio y tener un par de opciones. O bien mostramos el espacio fuera de los elementos, los separamos, por consiguiente, con espacios en blanco entre ellos o alrededor de ellos, o absorbemos el espacio adicional dentro de los elementos, por lo tanto, necesitamos un método para permitir que los elementos crezcan y ocupen este espacio.</p> + +<h3 id="Espacio_distribuido_fuera_de_los_elementos">Espacio distribuido fuera de los elementos</h3> + +<p>Para distribuir el espacio entre o alrededor de los elementos, usamos las propiedades de alineación en flexbox y la propiedad {{cssxref ("justify-content")}}. Puede leer más sobre esta propiedad en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinear elementos en un contenedor flexible</a>, que trata sobre la alineación de elementos en el eje principal.</p> + +<p>En el siguiente ejemplo en vivo, mostramos los elementos en su tamaño natural y utilizando <code>justify-content: space-between</code> crea cantidades iguales de espacio entre los elementos. Puede cambiar la forma en que se distribuye el espacio utilizando el valor <code>space-around</code>, o, donde sea compatible, <code>space-evenly</code>. También puede usar <code>flex-start</code> para colocar el espacio al final de los elementos, <code>flex-end</code> para colocarlo delante de ellos, o <code>center</code> para centrar los elementos de navegación.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}</p> + +<h3 id="Espacio_distribuido_dentro_de_los_elementos">Espacio distribuido dentro de los elementos</h3> + +<p>Un patrón diferente para la navegación sería distribuir el espacio disponible dentro de los elementos, en lugar de crear un espacio entre ellos. En este caso, utilizaríamos las propiedades {{cssxref ("flex")}} para permitir que los elementos crezcan y se reduzcan en proporción entre sí, como se describe en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Control la proporción de elementos flexibles a lo largo del eje principal</a>.</p> + +<p>Si quisiera que todos mis elementos de navegación tuvieran el mismo ancho, entonces podría usar <code>flex: auto</code>, que es la abreviatura de <code>flex: 1 1 auto,</code> todos los elementos crecen y se contraen desde una flex-basis de auto. Esto significaría que el elemento más largo tendría más espacio.</p> + +<p>En el ejemplo en vivo a continuación, intente cambiar <code>flex: auto</code> a <code>flex: 1</code>. Esta es la abreviatura de <code>flex: 1 1 0</code> y hace que todos los elementos se vuelvan del mismo ancho, ya que están trabajando desde una flex-basis de 0 permitiendo que todo el espacio sea distribuido uniformemente.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}</p> + +<h2 id="Navegación_dividida">Navegación dividida</h2> + +<p>Otra forma de alinear elementos en el eje principal es usar márgenes automáticos. Esto permite el patrón de diseño de una barra de navegación donde un grupo de elementos se alinean a la izquierda y otro grupo se alinea a la derecha.</p> + +<p>Aquí estamos utilizando la técnica de márgenes automáticos descrita en <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container#Using_auto_margins_for_main_axis_alignment">Uso de márgenes automáticos para la alineación del eje principal</a>. Los elementos se alinean en el eje principal con <code>flex-start</code> ya que este es el comportamiento inicial de flexbox, y estamos alineando el elemento de la derecha dándole un margen izquierdo de auto. Puede mover la clase de un elemento a otro para cambiar dónde ocurre la división.</p> + +<p>También en este ejemplo, estamos utilizando márgenes en los elementos flexibles para crear un espacio entre los elementos, y un margen negativo en el contenedor para que los elementos aún permanezcan a nivel con los bordes derecho e izquierdo. Hasta que las propiedades <code>gap</code> de la especificación de alineación de caja sea implementada en flexbox, debemos usar márgenes de esta manera si queremos crear un margen entre los elementos.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}</p> + +<h2 id="Centrar_elemento">Centrar elemento</h2> + +<p>Antes de flexbox, los desarrolladores bromeaban con que el problema más difícil en el diseño web era el centrado vertical. Esto ahora se ha hecho sencillo usando las propiedades de alineación en flexbox, como muestra el siguiente ejemplo en vivo.</p> + +<p>Puedes jugar con la alineación, alineando el elemento con el inicio con <code>flex-start</code> o al final con <code>flex-end</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}</p> + +<p>Es posible que en el futuro no tengamos que crear un contenedor en un contenedor flexible solo para centrar un solo elemento, ya que las propiedades de Alineación de cuadro se implementarán en última instancia en el diseño del bloque. Por ahora, sin embargo, si necesita centrar correctamente una cosa dentro de otra, flexbox es la forma de hacerlo. Como en el ejemplo anterior, convierta un contenedor en un contenedor flexible y luego utilice <code>align-items</code> en el elemento principal o apunte el propio elemento de flexión con <code>align-self</code>.</p> + +<h2 id="Diseño_de_tarjeta_empujando_hacia_abajo_el_footer">Diseño de tarjeta empujando hacia abajo el footer</h2> + +<p>Ya sea que use flexbox o CSS Grid para diseñar una lista de componentes de tarjeta, estos métodos de diseño solo funcionan en los elementos directos de los componentes flex o grid. Esto significa que si tiene cantidades variables de contenido, la tarjeta se extenderá hasta la altura del área de la cuadrícula o del contenedor flexible. Cualquier contenido interno usa un diseño de bloque regular, lo que significa que en una tarjeta con menos contenido, el pie de página subirá hasta la parte inferior del contenido en lugar de adherirse a la parte inferior de la tarjeta.</p> + +<p><img alt="Two card components showing that the internals of the component do not stretch with the wrapper." src="https://mdn.mozillademos.org/files/15669/flex-cards.png" style="height: 626px; width: 964px;"></p> + +<p>Flexbox puede resolver esto. Hacemos de la tarjeta un contenedor flexible, con <code>{{cssxref ("flex-direction")}} :column</code>. A continuación, configuramos el área de contenido con <code>flex: 1</code>, que es la abreviatura de <code>flex: 1 1 0</code>; el elemento puede crecer y reducirse desde una base flexible de 0. Como este es el único elemento que puede crecer, ocupa todo el espacio disponible en el contenedor flexible y empuja el pie de página hacia abajo. Si elimina la propiedad <code>flex</code> del ejemplo en vivo, verá cómo el pie de página se mueve hacia arriba para sentarse directamente debajo del contenido.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}</p> + +<h2 id="Objetos_multimedia">Objetos multimedia</h2> + +<p>El objeto multimedia es un patrón común en el diseño web: este patrón tiene una imagen u otro elemento a un lado y el texto a la derecha. Idealmente, un objeto multimedia debería poder voltearse, moviendo la imagen de izquierda a derecha.</p> + +<p>Vemos este patrón en todas partes, usado para comentarios, y en cualquier lugar que necesitamos para mostrar imágenes y descripciones. Con flexbox podemos permitir que la parte del objeto multimedia que contiene la imagen tome su información de tamaño de la imagen, y luego el cuerpo del objeto multimedia se flexione para ocupar el espacio restante.</p> + +<p>En el ejemplo en vivo a continuación puedes ver nuestro objeto multimedia. He usado las propiedades de alineación para alinear los elementos en el eje transversal con <code>flex-start</code>, y luego establezco el elemento flex <code>.content</code> a <code>flex: 1</code>. Al igual que nuestra columna del patrón de la tarjeta de diseño anterior, usar <code>flex: 1</code> significa que esta parte de la tarjeta puede crecer.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}</p> + +<p>Algunas de las cosas que podría querer probar en este ejemplo en vivo se relacionan con las diferentes formas en que podría desear restringir el objeto multimedia en su diseño.</p> + +<p>Para evitar que la imagen crezca demasiado, agregue un {{cssxref ("max-width")}} a la imagen. Como ese lado del objeto multimedia está usando los valores iniciales de flexbox, puede reducirse pero no crecer, y utiliza una <code>flex-basis</code> de auto. Cualquier {{cssxref ("ancho")}} o ancho máximo aplicado a la imagen se convertirá en la <code>flex-basis</code>.</p> + +<pre class="brush: css">.image img { + max-width: 100px; +} +</pre> + +<p>También puede permitir que ambos lados crezcan y se reduzcan en proporción. Si configura ambos lados a <code>flex: 1</code>, crecerán y se reducirán de una {{cssxref ("flex-basis")}} de 0, por lo que terminará con dos columnas de igual tamaño. Puede tomar el contenido como una guía y configurar ambos para <code>flex: auto</code>, en cuyo caso crecerían y se reducirían con el tamaño del contenido o cualquier tamaño aplicado directamente a los elementos de flexión, como el ancho de la imagen.</p> + +<pre class="brush: css">.media .content { + flex: 1; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<p>También puede dar a cada lado diferentes factores {{cssxref ("flex-grow")}}, por ejemplo, configurando el lado con la imagen para <code>flex: 1</code> y el lado del contenido para <code>flex: 3</code>. Esto significará que usan una <code>flex-basis</code> de <code>0</code>, pero distribuye ese espacio a diferentes proporciones según el factor <code>flex-grow</code> que haya asignado. Las propiedades de flexión que utilizamos para hacer esto se describen en detalle en la guía <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Controlando las proporciones de elementos de flexión a lo largo del eje principal</a>.</p> + +<pre class="brush: css">.media .content { + flex: 3; + padding: 10px; +} + +.image { + flex: 1; +}</pre> + +<h3 id="Volteando_el_objeto_multimedia">Volteando el objeto multimedia</h3> + +<p>Para cambiar la visualización del objeto multimedia de modo que la imagen esté a la derecha y el contenido a la izquierda, podemos usar la propiedad <code>flex-direction</code> configurada para <code>row-reverse</code>. El objeto multimedia ahora se muestra al revés. He logrado esto en el ejemplo en vivo agregando una clase <code>flipped</code> junto con la clase existente <code>.media</code>. Esto significa que puede ver cómo cambia la pantalla eliminando esa clase del html.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}</p> + +<h2 id="Controles_de_formulario">Controles de formulario</h2> + +<p>Flexbox es particularmente útil cuando se trata de estilos de controles de formularios. Los formularios tienen muchas marcas y muchos elementos pequeños que normalmente queremos alinear entre sí. Un patrón común es tener un elemento {{htmlelement ("input")}} asociado con un {{htmlelement ("button")}}, tal vez para un formulario de búsqueda o donde simplemente desea que su visitante ingrese una dirección de correo electrónico.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}</p> + +<p>Puede agregar una etiqueta o un icono a la izquierda tan fácilmente como hicimos clic en el botón derecho. He añadido una etiqueta y aparte, algunos estilos de color de fondo, no tuve que cambiar el diseño. El campo de entrada extensible ahora tiene un poco menos de espacio para actuar, pero utiliza el espacio izquierdo después que se representaron los dos elementos.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}</p> + +<p>Patrones como este pueden hacer que sea mucho más fácil crear una biblioteca de elementos de formulario para su diseño, que se adapte fácilmente a los elementos adicionales que se agregan. Está aprovechando la flexibilidad de flexbox al mezclar elementos que no crecen con los que lo hacen.</p> + +<h2 id="Conclusión">Conclusión</h2> + +<p>Mientras explora los patrones anteriores, es de esperar que haya empezado a ver cómo puede pensar en la mejor manera de utilizar flexbox para lograr el resultado que desea. Muy a menudo tienes más de una opción. Mezcle elementos que no puedan estirarse con aquellos que pueden, use el contenido para informar el tamaño o permita que flexbox comparta espacio en proporción. Tu decides.</p> + +<p>Piense en la mejor manera de presentar el contenido que tiene y luego vea cómo flexbox u otros métodos de diseño pueden ayudarlo a lograrlo.</p> diff --git a/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html new file mode 100644 index 0000000000..38e89c7813 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/conceptos_basicos_de_flexbox/index.html @@ -0,0 +1,227 @@ +--- +title: Conceptos Básicos de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Conceptos_Basicos_de_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary">El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación. Este artículo hace un repaso de las principales características de flexbox, las que exploraremos con mayor detalle en el resto de estas guías.</p> + +<p>Cuando describimos a flexbox como unidimensional destacamos el hecho que flexbox maneja el layout en una sola dimensión a la vez — ya sea como fila o como columna. Esto contrasta con el modelo bidimensional del <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout de CSS</a>, el cual controla columnas y filas a la vez.</p> + +<p><span style='background-color: #333333; color: #ffffff; font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 1.5rem;'>Los dos ejes de flexbox</span></p> + +<p>Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes — el eje principal y el eje cruzado. El eje principal está definido por la propiedad {{cssxref("flex-direction")}}, y el eje cruzado es perpendicular a este. Todo lo que hacemos con flexbox está referido a estos dos ejes, por lo que vale la pena entender cómo trabajan desde el principio.</p> + +<h3 id="El_eje_principal">El eje principal</h3> + +<p>El eje principal está definido por <code>flex-direction</code>, que posee cuatro posibles valores:</p> + +<ul> + <li><code>row</code></li> + <li><code>row-reverse</code></li> + <li><code>column</code></li> + <li><code>column-reverse</code></li> +</ul> + +<p>Si elegimos <code>row</code> o <code>row-reverse</code>, el eje principal correrá a lo largo de la fila según la <strong>dirección de la línea </strong>.</p> + +<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p> + +<p>Al elegir <code>column</code> o <code>column-reverse</code> el eje principal correrá desde el borde superior de la página hasta el final — según la <strong>dirección del bloque</strong>.</p> + +<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p> + +<h3 id="El_eje_cruzado">El eje cruzado</h3> + +<p>El eje cruzado va perpendicular al eje principal, y por lo tanto si <code>flex-direction</code> (del eje principal) es <code>row</code> o <code>row-reverse</code> el eje cruzado irá por las columnas.</p> + +<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p> + +<p>Si el eje principal es <code>column</code> o <code>column-reverse</code> entonces el eje cruzado corre a lo largo de las filas.</p> + +<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p> + +<p>Entender cuál eje es cuál es importante cuando empezamos a mirar la alineación y justificación flexible de los ítems; flexbox posee propiedades que permiten alinear y justificar el contenido sobre un eje o el otro.</p> + +<h2 id="Líneas_de_inicio_y_de_fin">Líneas de inicio y de fin</h2> + +<p>Otra área vital de entendimiento es cómo flexbox no hace suposiciones sobre la manera de escribir del documento. En el pasado, CSS estaba muy inclinado hacia el modo de escritura horizontal y de izquierda a derecha. Los métodos modernos de layout acogen la totalidad de modos de escritura así que no es necesario asumir que una línea de texto empezará arriba del documento y correrá de izquierda a derecha, con nuevas líneas dispuestas una abajo de la otra.</p> + +<p>Puede leer más acerca de la relación que hay entre flexbox y la especificación de los Modos de Escritura en un artículo posterior, sin embargo la siguiente descripción debería ayudar para explicar porqué no se habla de izquierda y derecha ni de arriba o abajo a la hora de describir la dirección en la que fluyen los ítems flex.</p> + +<p>Si <code>flex-direction</code> es <code>row</code> y estoy trabajando en español, entonces el margen inicial del eje principal quedará a la izquierda, y el margen final a la derecha.</p> + +<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> + +<p>Si fuera a trabajar en árabe, entonces el margen inicial de mi eje principal quedaría a la derecha y el margen final a la izquierda.</p> + +<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p> + +<p>En ambos casos el margen inicial del eje cruzado estará en el extremo superior del contenedor flex y el margen final en el extremo inferior, ya que ambos idiomas tiene un modo de escritura horizontal.</p> + +<p>Después de un tiempo, pensar en inicial y final en vez de izquierda y derecha se hará natural, y será útil cuando interactúe con otros métodos de layout tales como el CSS Grid Layout que sigue los mismos patrones.</p> + +<h2 id="El_contenedor_flex">El contenedor flex</h2> + +<p>Un área del documento que contiene un flexbox es llamada <strong>contendedor flex</strong>. Para crear un contenedor flex, establecemos la propiedad del área del contenedor {{cssxref("display")}} como <code>flex</code> o <code>inline-flex</code>. Tan pronto como hacemos esto, los hijos directos de este contenedor se vuelven <strong>ítems flex</strong>. Como con todas las propiedades de CSS, se definen algunos valores iniciales, así que cuando creemos un contenedor flex todos los ítems flex contenidos se comportarán de la siguiente manera.</p> + +<ul> + <li>Los ítems se despliegan sobre una fila (la propiedad <code>flex-direction</code> por defecto es <code>row</code>).</li> + <li>Los ítems empiezan desde el margen inicial sobre el eje principal.</li> + <li>Los ítems no se ajustan en la dimensión principal, pero se pueden contraer.</li> + <li>Los ítems se ajustarán para llenar el tamaño del eje cruzado.</li> + <li>La propiedad {{cssxref("flex-basis")}} es definida como <code>auto</code>.</li> + <li>La propiedad {{cssxref("flex-wrap")}} es definida como <code>nowrap</code>.</li> +</ul> + +<p>El resultado es que todos los ítems se alinearán en una solo fila, usando el tamaño del contenedor como su tamaño en el eje principal. Si hay más ítems de los que caben en el contenedor, estos no pasarán más abajo si no que sobrepasarán el margen. Si hay ítems más altos que otros, todos los ítems serán ajustados en el eje cruzado para alcanzar al mayor.</p> + +<p>Se puede ver en el ejercicio en vivo de abajo cómo luce. Intente editar el ítem o añadir ítems adicionales para así probar el comportamiento inicial de flexbox.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p> + +<h3 id="Cambiar_flex-direction">Cambiar flex-direction</h3> + +<p>Al añadir la propiedad {{cssxref("flex-direction")}} en el contenedor flex nos permite cambiar la dirección de cómo los ítems son desplegados. Colocando <code>flex-direction: row-reverse</code> se mantendrá el despliegue a lo largo de la fila, sin embargo el inicio y final quedarán al revés del original.</p> + +<p>Si cambiamos <code>flex-direction</code> a <code>column</code> el eje principal se cambiará y los ítems aparecerán en una columna. Colocando <code>column-reverse</code> las líneas de inicio y fin serán nuevamente puestas al revés.</p> + +<p>El ejemplo en vivo de abajo tiene <code>flex-direction</code> puesto como <code>row-reverse</code>. Pruebe los otros valores — <code>row</code>, <code>column</code> y <code>column-reverse</code> — para ver qué sucede con el contenido.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p> + +<h2 id="Contenedores_flex_Multi-línea_con_flex-wrap">Contenedores flex Multi-línea con flex-wrap</h2> + +<p>Si bien flexbox es un modelo unidimensional, es posible lograr que nuestros ítems flex sean repartidos en varías líneas. Haciendo esto, se deberá considerar cada línea como un nuevo contenedor flex. Cualquier distribución del espacio solo sucederá dentro de esa línea, sin referenciar las líneas colaterales.</p> + +<p>Para lograr repartirse en varias líneas añada la propiedad {{cssxref("flex-wrap")}} con el valor <code>wrap</code>. Cuando los ítems sean demasiados para desplegarlos en una línea, serán repartidos en la línea siguiente. El ejemplo en vivo de abajo contiene ítems que se les ha asignando un ancho, donde el ancho total de los ítems excede al del contenedor flex. Cuando <code>flex-wrap</code> se coloca como <code>wrap</code>, los ítems se repartirán. Al colocarlo como <code>nowrap</code>, el cual es el valor inicial, estos se contraerán para calzar con el contenedor ya que usan los valores iniciales de flexbox que permiten que los ítems se contraigan. Al usar <code>nowrap</code> los ítems podrían salirse del margen si estos no pudieran contraerse, o no contraerse lo suficiente para ser calzados.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p> + +<h2 id="La_abreviatura_flex-flow">La abreviatura flex-flow</h2> + +<p>Se pueden combinar las propiedades <code>flex-direction</code> y <code>flex-wrap</code> en la abreviatura {{cssxref("flex-flow")}} . El primer valor especificado es <code>flex-direction</code> y el segundo valor es <code>flex-wrap</code>.</p> + +<p>En el ejemplo en vivo de abajo intente cambiar el primer valor por uno de los valores permitidos para <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> o <code>column-reverse</code>, y cambie también el segundo valor por <code>wrap</code> y <code>nowrap</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p> + +<h2 id="Propiedades_aplicadas_a_los_ítems_flex">Propiedades aplicadas a los ítems flex</h2> + +<p>Para obtener más control sobre los ítems flex podemos apuntarlos directamente. Hacemos esto a través de tres propiedades:</p> + +<ul> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-basis")}}</li> +</ul> + +<p>Daremos un breve vistazo a estas propiedades en este resumen, y en un próximo artículo ahondaremos sobre su comportamiento.</p> + +<p>Antes de darle sentido a estas propiedades debemos considerar el concepto de <strong>espacio disponible</strong>. Lo que hacemos cuando cambiamos el valor de alguna de estas propiedades es cambiar la forma que se distribuye el espacio disponible entre nuestros ítems. Este concepto de espacio disponible es también importante cuando veamos la alineación de ítems.</p> + +<p>Si tenemos tres ítems con un ancho de 100 pixeles en un contenedor de 500 pixeles de ancho, entonces el espacio que se necesita para colocar nuestros ítems es de 300 pixeles. Esto deja 200 pixeles de espacio disponible. Si no cambiamos los valores iniciales entonces flexbox colocará ese espacio después del último ítem.</p> + +<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p> + +<p>Si en cambio quisiéramos que los ítems crecieran para llenar ese espacio, entonces necesitaremos un método para distribuir el espacio sobrante entre los ítems. Es justo lo que harán las propiedades <code>flex</code> que aplicaremos a dichos ítems.</p> + +<h3 id="La_propiedad_flex-basis">La propiedad <code>flex-basis</code></h3> + +<p>Con <code>flex-basis</code> se define el tamaño de un ítem en términos del espacio que deja como espacio disponible. El valor inicial de esta propiedad es <code>auto</code> — en este caso el navegador revisa si los ítems definen un tamaño. En el ejemplo de arriba, todos los ítems tienen un ancho de 100 pixeles así que este es usado como <code>flex-basis</code>.</p> + +<p>Si los ítems no tiene un tamaño entonces el tamaño de su contenido es usado como flex-basis. Y por eso, apenas declarado <code>display: flex</code> en el padre a fin de crear ítems flex, todos estos ítems se ubicaron en una sola fila y tomaron solo el espacio necesario para desplegar su contenido.</p> + +<h3 id="La_propiedad_flex-grow">La propiedad <code>flex-grow</code></h3> + +<p>Con la propiedad <code>flex-grow</code> definida como un entero positivo, los ítems flex pueden crecer en el eje principal a partir de <code>flex-basis</code>. Esto hará que el ítem se ajuste y tome todo el espacio disponible del eje, o una proporción del espacio disponible si otro ítem también puede crecer.</p> + +<p>Si le damos a todos los ítems del ejemplo anterior un valor <code>flex-grow</code> de 1 entonces el espacio disponible en el contenedor flex será compartido igualitariamente entre estos ítems y se ajustarán para llenar el contenedor sobre el eje principal.</p> + +<p>Podemos usar flex-grow apropiadamente para distribuir el espacio en proporciones. Si otorgamos al primer ítem un valor <code>flex-grow</code> de 2 y a los otros un valor de 1, entonces 2 partes serán dadas al primer ítem (100px de 200px en el caso del ejemplo de arriba) y 1 parte para cada uno de los restantes (cada uno con 50px de los 200px en total).</p> + +<h3 id="La_propiedad_flex-shrink">La propiedad <code>flex-shrink</code></h3> + +<p>Así como la propiedad <code>flex-grow</code> se encarga de añadir espacio sobre el eje principal, la propiedad <code>flex-shrink</code> controla como se contrae. Si no contamos con suficiente espacio en el contenedor para colocar los ítems y <code>flex-shrink</code> posee un valor entero positivo, el ítem puede contraerse a partir de <code>flex-basis</code>. Así como podemos asignar diferentes valores de <code>flex-grow</code> con el fin que un ítem se expanda más rápido que otros — un ítem con un valor más alto de <code>flex-shrink</code> se contraerá más rápido que sus hermanos que poseen valores menores.</p> + +<p>El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.</p> + +<div class="note"> +<p>Nótese que los valores de <code>flex-grow</code> y <code>flex-shrink</code> son proporciones. Típicamente si pusiéramos todos los ítems flex: <code>1 1 200px</code> y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: <code>2 1 200px</code>. Aunque igualmente podemos colocar flex: <code>10 1 200px</code> y flex: <code>20 1 200px</code> si quisiéramos.</p> +</div> + +<h3 id="Valores_abreviados_para_las_propiedades_flex">Valores abreviados para las propiedades flex</h3> + +<p>Difícilmente veremos la propiedades <code>flex-grow</code>, <code>flex-shrink</code> y <code>flex-basis</code> usadas individualmente; si no que han sido combinadas en la abreviación {{cssxref("flex")}} . La abreviación <code>flex</code> permite establecer los tres valores en este orden: <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p> + +<p>El ejemplo en vivo de más abajo permite probar los diferentes valores de la abreviación flex; recuerde que el primer valor es <code>flex-grow</code>. Dándole un valor positivo significa que el ítem puede crecer. El segundo es <code>flex-shrink</code> — con un valor positivo los ítems pueden contraerse. El valor final es <code>flex-basis</code>; este es el valor que los ítems usan como valor base para crecer y contraerse.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 400)}}</p> + +<p>Hay además algunas abreviaturas de valores que cubren la mayoría de los casos de uso. Se ven con frecuencia utilizados en tutoriales, y en muchos casos es todo lo que necesitamos usar. Los valores predefinidos son los siguientes:</p> + +<ul> + <li><code>flex: initial</code></li> + <li><code>flex: auto</code></li> + <li><code>flex: none</code></li> + <li><code>flex: <positive-number></code></li> +</ul> + +<p>Fijando <code>flex: initial</code> el ítem se restablece con los valores iniciales de Flexbox. Es lo mismo que <code>flex: 0 1 auto</code>. En este caso el valor de <code>flex-grow</code> is 0, así que los ítems no crecerán más de su tamaño <code>flex-basis</code> . El valor <code>flex-shrink</code> es 1, así que los ítems pueden contraerse si es necesario en vez de salirse de los márgenes. El valor de <code>flex-basis</code> es <code>auto</code>. Los ítems pueden definir un tamaño en la dimensión del eje principal, o bien obtener su tamaño por el contenido del los mismos.</p> + +<p>Usar <code>flex: auto</code> es lo mismo que usar <code>flex: 1 1 auto</code> , es como con <code>flex:initial</code> pero en este caso los ítems pueden crecer y llenar el contendor así como encoger si se requiere.</p> + +<p>Al usar <code>flex: none</code> se crearán ítems flex totalmente inflexibles. Es como escribir <code>flex: 0 0 auto</code>. Los ítems no pueden ni crecer ni encoger pero serán colocados usando flexbox con <code>flex-basis</code> en <code>auto</code>.</p> + +<p>Una abreviación que es común en tutoriales es <code>flex: 1</code> o <code>flex: 2</code> y más. Es como usar <code>flex: 1 1 0</code>. Los ítems pueden crecer o encoger con un <code>flex-basis</code> de 0.</p> + +<p>Pruebe estas abreviaciones de valores en el ejemplo en vivo de abajo.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 480)}}</p> + +<h2 id="Alineación_justificación_y_distribución_del_espacio_libre_entre_ítems">Alineación, justificación y distribución del espacio libre entre ítems</h2> + +<p>Una característica clave de flexbox es la capacidad de alinear y justificar ítems sobre los ejes principal y cruzado, y distribuir el espacio entre los ítems flex.</p> + +<h3 id="align-items"><code>align-items</code></h3> + +<p>La propiedad {{cssxref("align-items")}} alineará los ítems sobre el eje cruzado.</p> + +<p>El valor inicial para esta propiedad es <code>stretch</code> razón por la cual los ítems se ajustan por defecto a la altura de aquel más alto. En efecto se ajustan para llenar el contenedor flex — el ítem más alto define la altura de este.</p> + +<p>En cambio definimos <code>align-items</code> como <code>flex-start</code> para que los ítems se alineen al comienzo del contenedor flex, <code>flex-end</code> para alinearlos al final, o <code>center</code> para alinearlos al centro. Intente esto en el ejemplo en vivo — He definido en el contenedor flex una altura para que se aprecie que se pueden mover libremente dentro del contenedor. Vea lo que sucede si se coloca el valor align-items como:</p> + +<ul> + <li><code>stretch</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p> + +<h3 id="justify-content"><code>justify-content</code></h3> + +<p>La propiedad {{cssxref("justify-content")}} es usada para alinear los ítems en el eje principal, cuyo <code>flex-direction</code> define la dirección del flujo. El valor inicial es <code>flex-start</code> que alineará los ítems al inicio del margen del contenedor, pero también se podría definir como <code>flex-end</code> para alinearlos al final, o <code>center</code> para alinearlos al centro.</p> + +<p>También podemos usar <code>space-between</code> para tomar todo el espacio sobrante después de que los ítems hayan sido colocados, y distribuir de forma pareja los ítems para que haya un espacio equitativo entre cada ítem. O bien, usamos el valor <code>space-around</code> para crear un espacio equitativo a la derecha e izquierda de cada ítem.</p> + +<p>Pruebe con los siguientes valores de<code>justify-content</code> en el ejemplo en vivo:</p> + +<ul> + <li><code>space-evenly</code></li> + <li><code>flex-start</code></li> + <li><code>flex-end</code></li> + <li><code>center</code></li> + <li><code>space-around</code></li> + <li><code>space-between</code></li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p> + +<p>En un próximo artículo ahondaremos sobre estas propiedades, con el fin de obtener mejor entendimiento de cómo funcionan. Sin embargo, estos sencillos ejemplos serán útiles para la mayoría de los casos de uso.</p> + +<h2 id="Próximos_pasos">Próximos pasos</h2> + +<p>Al final de este artículo usted debería tener un entendimiento de las características básicas de Flexbox. En el próximo artículo veremos cómo esta especificación encaja con las otras partes de CSS.</p> diff --git a/files/es/web/css/css_flexible_box_layout/index.html b/files/es/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..b39db24d68 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,118 @@ +--- +title: Diseño de caja flexible CSS +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +<p>{{CSSRef}}</p> + +<p>El diseño<strong> CSS Flexbox</strong> es un módulo de CSS que define un modelo de caja, optimizado para el diseño de interfaces de usuario. En el diseño flex, los nodos hijo se pueden distribuir en dirección vertical u horizontal y se pueden "flexibilizar" sus tamaños, bien sea rellenando el espacio disponible o encogiéndose para evitar salirse del contorno del nodo padre. Se puede manipular fácilmente tanto la alineación horizontal como la vertical, de los nodos hijo. La anidación de estas cajas (horizontal dentro de vertical o vertical dentro de horizontal) se puede usar para construir diseños en dos dimensiones.</p> + +<h2 id="Ejemplo_Básico">Ejemplo Básico</h2> + +<p>En el siguiente ejemplo, se ha definido un contenedor como <code>display: flex</code>, lo que significa que los tres elementos hijo se convierten en elementos flexibles. <span>El valor de <code>justify-content</code> se ha establecido en <code>space-between</code> para espaciar los elementos de manera uniforme en el eje principal.</span> <span>Se ha colocado una cantidad igual de espacio entre cada elemento, con los elementos izquierdo y derecho alineados con los bordes del contenedor flexible.</span> <span>También puede ver que los elementos se estiran en el eje transversal, debido a que el valor predeterminado de </span><code>align-items</code><span> es <code>stretch</code>.</span> <span>Los elementos se extienden hasta la altura del contenedor flexible, por lo que cada uno de ellos tiene tanta altura como el elemento más alto.</span></p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p> + +<h2 id="Referencia">Referencia</h2> + +<h3 id="Propiedades_CSS">Propiedades CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("flex")}}</li> + <li>{{cssxref("flex-basis")}}</li> + <li>{{cssxref("flex-direction")}}</li> + <li>{{cssxref("flex-flow")}}</li> + <li>{{cssxref("flex-grow")}}</li> + <li>{{cssxref("flex-shrink")}}</li> + <li>{{cssxref("flex-wrap")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("order")}}</li> +</ul> +</div> + +<h3 id="Propiedades_de_alineación">Propiedades de alineación</h3> + +<p>Las propiedades <code>align-content</code>, <code>align-self</code>, <code>align-items</code> y <code>justify-content</code> aparecieron inicialmente en la especificación de Flexbox, pero ahora están definidas en Alineación de cuadro y la especificación de Flexbox las refiere a la Especificación de alineación de cuadro para definiciones actualizadas. Las propiedades de alineación adicionales también se definen en Alineación de cuadro.</p> + +<div class="index"> +<ul> + <li>{{cssxref("align-content")}}</li> + <li>{{cssxref("align-items")}}</li> + <li>{{cssxref("align-self")}}</li> + <li>{{cssxref("justify-content")}}</li> + <li>{{cssxref("place-content")}}</li> + <li>{{cssxref("row-gap")}}</li> + <li>{{cssxref("column-gap")}}</li> + <li>{{cssxref("gap")}}</li> +</ul> +</div> + +<h3 id="Entradas_del_glosario">Entradas del glosario</h3> + +<div class="index"> +<ul> + <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Container">Flex Container</a></li> + <li><a href="/en-US/docs/Glossary/Flex_Item">Flex Item</a></li> + <li><a href="/en-US/docs/Glossary/Main_Axis">Main Axis</a></li> + <li><a href="/en-US/docs/Glossary/Cross_Axis">Cross Axis</a></li> + <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li> +</ul> +</div> + +<h2 id="Guías">Guías</h2> + +<dl> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Conceptos básicos de Flexbox</a></dt> + <dd>Una visión general de las características de flexbox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Relación de flexbox con otros métodos de diseño.</a></dt> + <dd>Cómo flexbox se relaciona con otros métodos de diseño y otras especificaciones de CSS</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Alinear elementos en un contenedor flexible</a></dt> + <dd>Cómo funcionan las propiedades de Alineación de cuadro con flexbox.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Ordenando elementos flex</a></dt> + <dd>Explicando las diferentes formas de cambiar el orden y la dirección de los elementos, y cubriendo los problemas potenciales al hacerlo.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Control de proporción de elementos flex a lo largo del eje principal</a></dt> + <dd>Este artículo explica las propiedades de flex-grow, flex-shrink y flex-basis.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Dominar el envoltorio de elementos flex</a></dt> + <dd>Cómo crear contenedores flex con múltiples líneas y controlar la visualización de los elementos en esas líneas.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Casos de uso típicos de flexbox</a></dt> + <dd>Patrones de diseño comunes que son los típicos casos de uso de flexbox.</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Compatibilidad con versiones anteriores de Flexbox</a></dt> + <dd>Estado del navegador de flexbox, problemas de interoperabilidad y compatibilidad con navegadores antiguos y versiones de la especificación</dd> +</dl> + +<h2 id="Especificaciones">Especificaciones</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificación</th> + <th scope="col">Estado</th> + <th scope="col">Comentario</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Flexbox') }}</td> + <td>{{ Spec2('CSS3 Flexbox') }}</td> + <td>Definición inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Ver_también">Ver también</h2> + +<dl> + <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt> + <dd>una lista comisariada por la comunidad de errores y soluciones del navegador Flexbox</dd> + <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Combinaciones (Mixins) Flexbox para varios navegadores</a></dt> + <dd>Este artículo proporciona un conjunto de combinaciones(mixins)para aquellos que desean crear experiencias de flexbox en varios navegadores que incluso funcionan en navegadores antiguos que no admiten la sintaxis moderna de flexbox.</dd> +</dl> diff --git a/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html new file mode 100644 index 0000000000..95804a5da2 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_flexbox_para_componer_aplicaciones_web/index.html @@ -0,0 +1,190 @@ +--- +title: Usando flexbox para componer aplicaciones web +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_flexbox_para_componer_aplicaciones_web +tags: + - Avanzado + - CSS + - Cajas Flexibles CSS + - Ejemplo + - Guía + - Web +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +<p>{{CSSRef}}</p> + +<p>Usar <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">flexbox</a> puede ayudarte a diseñar atractivas composiciones en aplicaciones web que escalen mejor de escritorio a móvil. Pon fin a los elementos flotantes {{HTMLElement("div")}}, <a href="/en-US/docs/Web/CSS/position#Absolute_positioning">el posicionamiento absoluto</a>, y los <em>hacks</em> de JavaScript, y comienza a construir composiciones fluidas en horizontal y vertical en apenas unas líneas de <a href="/es/docs/Web/CSS">CSS</a>. Algunos ejemplos básicos de casos de uso:</p> + +<ul> + <li>Quieres centrar un elemento en la mitad de una página</li> + <li>Quieres un conjunto de contenedores que fluyan verticalmente, uno tras otro</li> + <li>Quieres crear una fila de botones u otros elementos que colapse verticalmente en tamaños menores de pantalla</li> +</ul> + +<p>Este artículo sólo aborda el uso de <em>flexbox</em> con navegadores que soportan la implementación moderna y sin prefijos del estándar. Para información sobre prefijos de proveedores para navegadores más antiguos, por favor lee <a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">la guía más general para usar cajas flexibles de CSS</a>.</p> + +<h2 id="Conceptos_básicos">Conceptos básicos</h2> + +<p>Con flexbox puedes hacer que los elementos dentro de cualquier {{HTMLElement("div")}} fluyan estableciendo la propiedad {{cssxref("display")}} como <code>flex</code> y luego dando a la propiedad {{cssxref("flex-flow")}} el valor <code>row</code>, si deseas que los elementos fluyan horizontalmente, o el valor <code>column</code>, si quieres que lo hagan verticalmente. Si estás usando un flexbox horizontal y deseas que tus contenidos queden envueltos verticalmente, especifica además el valor <code>wrap</code>.</p> + +<p>Después, para cada elemento que desees sea parte del flujo de cajas, establece la propiedad {{cssxref("flex")}}. Generalmente querrás utilizar uno de los tres siguientes valores:</p> + +<ul> + <li>Si quieres un elemento que sólo ocupa su ancho asignado, como un botón, utiliza <code>flex: none</code> que se expande a <code>0 0 auto</code>.</li> + <li>Si deseas explícitamente dimensionar un elemento, usa <code>flex: 0 0 <em>tamaño</em></code>. Por ejemplo: <code>flex 0 0 60px</code>.</li> + <li>Si necesitas un elemento que se expanda para rellenar el espacio disponible, compartiendo el espacio igualmente si hay múltiples elementos de este tipo dentro del flujo, utiliza <code>flex: auto</code>. Se expande a <code>1 1 auto</code>.</li> +</ul> + +<p>Por supuesto, hay otras posibilidades, pero estas deberían cubrir los casos de uso básicos. Veamos cómo se aplica esto en algunos ejemplos.</p> + +<h2 id="Centrando_un_elemento_en_una_página">Centrando un elemento en una página</h2> + +<p>Para este caso, el método más sencillo es crear dos cajas flexibles, una dentro de otra. Cada flexbox tendrá tres elementos: dos de ellos conteniendo el elemento centrado y después el propio elemento centrado.</p> + +<h3 id="Contenido_CSS">Contenido CSS</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="Contenido_HTML">Contenido HTML</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="Resultado">Resultado</h3> + +<p>{{ EmbedLiveSample('Centering_an_element_inside_a_page', 500, 500) }}</p> + +<h2 id="Haciendo_fluir_verticalmente_un_conjunto_de_contenedores">Haciendo fluir verticalmente un conjunto de contenedores</h2> + +<p>Imagina que tienes la composición de una página con una sección de cabecera, una de contenidos y un pie. La cabecera y el pie deberían tener un tamaño fijo, pero la sección de contenidos se debería redimensionar según el espacio disponible. Esto puede lograrse estableciendo la propiedad {{cssxref("flex")}} del contenido como <code>auto</code> y la misma propiedad {{cssxref("flex")}} de la cabecera y el pie como <code>none</code>.</p> + +<h3 id="Contenido_CSS_2">Contenido CSS</h3> + +<pre class="brush: css;highlight:[8,14,18]">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="Contenido_HTML_2">Contenido HTML</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Increase container size</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div> +</div> +</pre> + +<h3 id="Contenido_JavaScript">Contenido JavaScript</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="Resultado_2">Resultado</h3> + +<p>{{ EmbedLiveSample('Flowing_a_set_of_containers_vertically', 500, 500) }}</p> + +<p>Este ejemplo se ha creado para que clicar en el encabezamiento incremente el tamaño y clicar en el pie lo reduzca. Observa cómo el contenido se redimensiona automática y adecuadamente, mientras las dimensiones del encabezamiento y el pie se mantienen constantes.</p> + +<h2 id="Creando_un_contenedor_que_colapse_horizontalmente">Creando un contenedor que colapse horizontalmente</h2> + +<p>En algunos casos podrías querer componer horizontalmente un conjunto de información donde el tamaño de pantalla lo permita, pero colapsar los contenidos horizontalmente donde no. Esto es bastate sencillo con flexbox. Puedes conseguirlo añadiendo a la propiedad {{cssxref("flex-flow")}} el valor <code>wrap</code>.</p> + +<h3 id="Contenido_CSS_3">Contenido CSS</h3> + +<pre class="brush: css;highlight:[4]">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="Contenido_HTML_3">Contenido HTML</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Element 1</div> + <div class="fixed-size">Element 2</div> + <div class="fixed-size">Element 3</div> +</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button> +</pre> + +<h3 id="Contenido_JavaScript_2">Contenido JavaScript</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="Resultado_3">Resultado</h3> + +<p>{{ EmbedLiveSample('Creating_a_collapsing_horizontal_container', 500, 200) }}</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS">Usando cajas flexibles CSS</a></li> +</ul> diff --git a/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html new file mode 100644 index 0000000000..7046347011 --- /dev/null +++ b/files/es/web/css/css_flexible_box_layout/usando_las_cajas_flexibles_css/index.html @@ -0,0 +1,375 @@ +--- +title: Usando las cajas flexibles CSS +slug: Web/CSS/CSS_Flexible_Box_Layout/Usando_las_cajas_flexibles_CSS +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary">La propiedad <strong>Flexible Box</strong>, o <strong>flexbox</strong>, de CSS3 es un <a href="https://developer.mozilla.org/es/docs/Web/CSS/Layout_mode">modo de diseño</a> que permite colocar los elementos de una página para que se comporten de forma predecible cuando el diseño de la página debe acomodarse a diferentes tamaños de pantalla y diferentes dispositivos. Para muchas aplicaciones, el modelo "caja flexible" produce una mejora sobre el modelo "bloque" porque no utiliza la propiedad <span style="font-family: courier new,andale mono,monospace;">float</span>, ni hace que los márgenes del contenedor flexible interfieran con los márgenes de sus contenidos.</span></p> + +<p>Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.</p> + +<div class="note"><strong>Nota:</strong> Aunque la especificación del diseño de "cajas flexibles" de CSS está en fase de "candidata a recomendación", no todos los navegadores la han implementado. La implementación de WebKit requiere el prefijo <code>-webkit</code>; Internet Explorer implementa una versión antigua de la especificación, con prefijo; Opera 12.10 implementa la última versión, sin prefijo. Revisa la tabla de compatibilidad de cada propiedad para saber cuál es el estado actual de compatibilidad.</div> + +<h2 id="El_concepto_de_cajas_flexibles">El concepto de "cajas flexibles"</h2> + +<p>Lo que caracteriza un diseño flexible es su habilidad para alterar el ancho y alto de sus elementos para ajustarse lo mejor posible al espacio disponible en cualquier dispositivo. Un contenedor flexible expande sus elementos para rellenar el espacio libre, o los comprime para evitar que rebasen el área prevista.</p> + +<p>El algoritmo del modelo de diseño de "cajas flexibles" no parte de niguna dirección predeterminada, al contrario de lo que ocurre con el modelo "bloque", que asume una disposición vertical de los elementos, o lo que pasa con el modelo "en línea", que asume una disposición horizontal. Mientras que el modelo "bloque" funciona bien para páginas, se queda muy corto cuando se trata de aplicaciones en las que hay que tener en cuenta el cambio de orientación del dispositivo o los cambios de tamaño realizados por los gestos del usuario. El modelo de "cajas flexibles" es más apropiado para diseños de pequeña escala, mientras que el (emergente) modelo "rejilla" es adecuado para diseños de gran escala. Ambos son parte del gran esfuerzo que el "CSS Working Group" está realizando para proveer de mayor interoperabilidad a las aplicaciones web con todo tipo de usuarios, distintos modos de escritura, y otras necesidades de flexibilidad.</p> + +<h2 id="Vocabulario_de_cajas_flexibles">Vocabulario de "cajas flexibles"</h2> + +<p>Aunque al hablar de las "cajas flexibles" nos olvidamos de términos como "horizontal/en línea" y "vertical/bloque", se hace necesario emplear una nueva terminología. Fíjate en el siguiente diagrama para afianzar el vocabulario empleado en sus elementos. Se muestra un contenedor flexible que tiene una <code>flex-direction</code> de tipo <code>row</code>, que significa que los elementos flexibles se muestra uno a continuación del otro horizontalmente a lo largo del eje principal (main axis) de acuerdo con el modo de escritura preestablecido, y en este caso, la dirección en que el texto de los elementos fluye es de izquierda-a-derecha.</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p> + +<dl> + <dt>Contenedor flexible (Flex container)</dt> + <dd>El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores <code>flex</code> o <code>inline-flex</code> en la propiedad <a href="/en/CSS/display" rel="internal" title="display"><code>display</code></a>.</dd> + <dt>Elemento flexible (Flex item)</dt> + <dd> + <p>Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.</p> + </dd> + <dt>Ejes</dt> + <dd> + <p>Cada diseño de "caja flexible" sigue dos ejes. El <strong>eje principal</strong> es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El <strong>eje secundario</strong> es el eje perpendicular al <strong>eje principal</strong>.</p> + + <ul> + <li>La propiedad <code><a href="/en/CSS/flex-direction" rel="internal" title="flex-direction">flex-direction</a></code> establece el eje principal.</li> + <li>La propiedad <a href="/en/CSS/justify-content" rel="internal" title="en/CSS/justify-content"><code>justify-content</code></a> define cómo los elementos flexibles se disponen a lo largo del eje principal en la línea en curso.</li> + <li>La propiedad <a href="/en/CSS/align-items" title="en/CSS/align-items"><code>align-items</code></a> define cómo los elementos flexibles se disponen a lo largo del eje secundario de la línea en curso.</li> + <li>La propiedad <a href="/en/CSS/align-self" title="en/CSS/align-self"><code>align-self</code></a> define cómo cada elemento flexible se alinea respecto al eje secundario, y sustituye al valor por defecto establecido por <code>align-items.</code></li> + </ul> + </dd> + <dt>Direcciones</dt> + <dd> + <p>Los lados <strong>inicio principal</strong>/<strong>fin principal (main start/main end) </strong>e <strong>inicio secundario</strong>/<strong>fin </strong><strong>secundario (cross start/cross end)</strong> del contenedor flexible describen el origen y final del flujo de los elementos flexibles. Estos siguen el eje principal y secundario según el vector establecido por <code>writing-mode</code> (izquierda-a-derecha, derecha-a-izquierda, etc.).</p> + + <ul> + <li>La propiedad <a href="/en/CSS/order" rel="internal" title="en/CSS/order"><code>order</code></a> asigna elementos a grupos ordinales y determina qué elementos aparecen primero.</li> + <li>La propiedad <a href="/en/CSS/flex-flow" rel="internal" title="flex-flow"><code>flex-flow</code></a> combina las propiedades <a href="/en/CSS/flex-direction" rel="internal" title="flex-direction"><code>flex-direction</code></a> y <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a> para colocar los elementos flexibles.</li> + </ul> + </dd> + <dt>Líneas</dt> + <dd> + <p>Los elementos flexibles pueden disponerse en una sola o varias líneas de acuerdo con la propiedad <a href="/en/CSS/flex-wrap" rel="internal" title="flex-wrap"><code>flex-wrap</code></a>, que controla la dirección del eje secundario y la dirección en la que las nuevas líneas se apilan.</p> + </dd> + <dt>Dimensiones</dt> + <dd> + <p>Los términos equivalentes a "altura" y "anchura" usados en los elementos flexibles son <strong>tamaño principal (main size)</strong> and <strong>tamaño secundario (cross size),</strong> que respectivamente siguen al eje principal y al eje secundario del contenedor flexible.</p> + + <ul> + <li>La propiedades <code><a href="/en/CSS/min-height" title="/en/CSS/min-height">min-height</a></code> y <code><a href="/en/CSS/min-width" title="/en/CSS/min-width">min-width</a></code> tienen un nuevo valor, <code>auto</code> que establece el tamaño mínimo de un elemento flexible.</li> + <li>La propiedad <a href="/en/CSS/flex" rel="internal" title="en/CSS/flex"><code>flex</code></a> combina las propiedades <code><a href="/en/CSS/flex-basis" rel="internal" title="en/CSS/flex-basis">flex-basis</a></code>, <a href="/en/CSS/flex-grow" rel="internal" title="en/CSS/flex-grow"><code>flex-grow</code></a>, y <a href="/en/CSS/flex-shrink" rel="internal" title="en/CSS/flex-shrink"><code>flex-shrink</code></a> para establecer el grado de flexibilidad de los elementos flexibles.</li> + </ul> + </dd> +</dl> + +<h2 id="Diseñando_una_caja_flexible">Diseñando una "caja flexible"</h2> + +<p>Para indicar que unos elementos tienen este estilo CSS, asigna la propiedad <a href="/en/CSS/display" title="/en/CSS/display">display</a> así:</p> + +<pre class="brush: css">display : flex</pre> + +<p>o</p> + +<pre class="brush: css">display : inline-flex</pre> + +<p>Haciendo esto, se define el elemento como contenedor flexible y todos sus "hijos" como elementos flexibles. El valor <code>flex</code> hace que el contenedor flexible sea un bloque dentro del elemento "padre" al que pertenezca. El valor <code>inline-flex</code> hace que el contenedor flexible sea un elemento "en línea" dentro del elemento "padre" al que pertenezca.</p> + +<div class="note"><strong>Nota:</strong> Cuando utilices un prefijo para el tipo de navegador, ponlo en la propiedad "display" no en el atributo "display". Por ejemplo, <code>display : -webkit-flex</code>.</div> + +<h2 id="Consideraciones_de_los_elementos_flexibles">Consideraciones de los elementos flexibles</h2> + +<p>El texto que se encuentre directamente dentro de un contenedor flexible, será automáticamente envuelto en un elemento flexible anónimo. Sin embargo, si un elemento flexible contiene solamente espacios en blanco no será mostrado, como si tuviera la propiedad <code style="color: rgb(93,86,54); font-size: 14px;">display:none</code>.</p> + +<p>Los "hijos" de un contenedor flexible que tengan un posicionamiento absoluto, se situarán de manera que su posición estática se determine en referencia a la esquina del <strong>inicio principal (main start)</strong> de su contenedor flexible.</p> + +<p>Actualmente, debido a un problema conocido, asignar <code style="font-size: 14px;">visibility:collapse</code> a un elemento flexible causa que sea tratado como si fuera <code style="font-size: 14px;">display:none</code> en vez de lo que se supone que debería ocurrir, es decir, como si fuera <code style="font-size: 14px;">visibility:hidden</code>. La alternativa mientras se resuelve este problema es usar <code>visibility:hidden</code> para elementos flexibles que deban comportarse como <code>visibility:collapse</code>.</p> + +<p>Los márgenes de elementos flexibles adyacentes no se colapsan. Usando márgenes <code>auto</code> se absorbe el espacio extra vertical y horizontalmente y puede ser utilizado para alinear o separar elementos flexibles adyacentes. Ver <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins" title="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Aligning with 'auto' margins</a> en la especificación "W3C Flexible Box Layout Model" para más detalles al respecto.</p> + +<p>Para asegurar un tamaño mínimo por defecto de los elementos flexibles, usa <code>min-width:auto</code> y/o <code>min-height:auto</code>. Para los elementos flexibles, el valor de atributo <code>auto</code> calcula la mínima anchura/altura del elemento para que no sea menor que la anchura/altura de su contenido, garantizando que el elemento es mostrado suficientemente grande como para que se vea su contenido. Ver {{cssxref("min-width")}} y {{cssxref("min-height")}} para más detalles al respecto.</p> + +<p>Las propiedades de alineación de "cajas flexibles" realizan un "verdadero" centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si estos rebasan su contenedor flexible. Esto puede llegar a ser un problema, ya que si sobrepasan el tope superior de la página o el izquierdo (en escritura LTR de izquierda-a-derecha) o el derecho (en escritura RTL de derecha-a-izquierda), no se puede desplazar hacia ese área, incluso habiendo contenido allí. En el futuro, las propiedades de alineación se ampliarán para que tengan una opción "safe" (seguro) para controlar esta situación. De momento, si esto te preocupa, puedes usar los márgenes para conseguir el centrado, ya que estos responderán de modo seguro parando el centrado si se sobrepasan los límites. En vez de usar las propiedades <code>align-</code>, simplemente pon márgenes automáticos en los elementos flexibles que quieras centrar. En vez de usar las propiedades <code>justify-</code>, pon márgenes automáticos en los límites exteriores del primer y último elemento flexible del contenedor flexible. Los márgenes automáticos se adaptarán asumiendo el espacio sobrante, centrando los elementos flexibles donde sobre espacio, y cambiando a alineación normal donde no sobre espacio. Sin embargo, si tratas de reemplazar <code>justify-content</code> con "centrado-basado-en-márgenes" en una "caja flexible" multi-línea, probablemente no funcionará, ya que tendrías que poner márgenes en el primer y último elemento de cada línea. A menos que puedas predecir qué elementos encajarán en cada línea, no tendrás una respuesta fiable usando el "<span style="line-height: inherit;">centrado-basado-en-márgenes</span><span style="line-height: inherit;">" en el eje principal al reemplazar la propiedad </span><code style="font-size: 14px; line-height: inherit;">justify-content</code><span style="line-height: inherit;">.</span></p> + +<p>Recuerda que mientras el orden en que se muestran los elementos es independiente de su orden en el código fuente, esta independecia afecta solamente a la representación visual, y no al orden de locución y navegación que seguirán el orden establecido en el código fuente. Incluso la propiedad {{cssxref("order")}} no afectará a la secuencia de locución ni de navegación. Así que los desarrolladores deben preocuparse del orden de los elementos adecuadamente en el código fuente para que no se deteriore la accesibilidad del documento. </p> + +<h2 id="Propiedades_de_las_cajas_flexibles">Propiedades de las "cajas flexibles"</h2> + +<h3 id="Propiedades_que_no_afectan_a_las_cajas_flexibles">Propiedades que no afectan a las "cajas flexibles"</h3> + +<p>Como las "cajas flexibles" emplean un algoritmo diferente, alguna propiedades no tienen sentido para un contenedor flexible.</p> + +<ul> + <li>Propiedades column-* del <a href="/en/CSS/Using_CSS_multi-column_layouts" title="/en/CSS/Using_CSS_multi-column_layouts">Módulo Multicol</a> no tienen ningún efecto en un elemento flexible.</li> + <li>{{cssxref("float")}} y {{cssxref("clear")}} no tienen ningún efecto en un elemento flexible. Usar <code>float</code> causa que la propiedad <code>display</code> del elemento se comporte como <code>block</code>.</li> + <li>{{cssxref("vertical-align")}} no tiene efecto en la alineación de los elementos flexibles.</li> +</ul> + +<h2 id="Ejemplos">Ejemplos</h2> + +<h3 id="Ejemplo_básico_flex">Ejemplo básico "flex"</h3> + +<p>Este ejemplo básico muestra como aplicar "flexibilidad" a un elemento y como sus "hijos" se comportan flexiblemente. </p> + +<pre class="brush:html;"><!DOCTYPE html> +<html lang="en"> + <head> + <style> + + .flex + { + /* basic styling */ + width: 350px; + height: 200px; + border: 1px solid #555; + font: 14px Arial; + + /* flexbox setup */ + display: -webkit-flex; + -webkit-flex-direction: row; + + display: flex; + flex-direction: row; + } + + .flex > div + { + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + + width: 30px; /* To make the transition work nicely. (Transitions to/from + "width:auto" are buggy in Gecko and Webkit, at least. + See http://bugzil.la/731886 for more info.) */ + + -webkit-transition: width 0.7s ease-out; + transition: width 0.7s ease-out; + } + + /* colors */ + .flex > div:nth-child(1){ background : #009246; } + .flex > div:nth-child(2){ background : #F1F2F1; } + .flex > div:nth-child(3){ background : #CE2B37; } + + .flex > div:hover + { + width: 200px; + } + + </style> + + </head> + <body> + <p>Flexbox nuovo</p> + <div class="flex"> + <div>uno</div> + <div>due</div> + <div>tre</div> + </div> + </body> +</html></pre> + +<h3 id="Ejemplo_de_Diseño_del_Santo_Gríal">Ejemplo de "Diseño del Santo Gríal"</h3> + +<p>Este ejemplo muestra como la "caja flexible" proporciona la habilidad de cambiar dinámicamente el diseño para distintas resoluciones de pantalla. El diagrama siguiente ilustra la transformación.</p> + +<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p> + +<p>Aquí se muestra el caso en que el diseño de la página adaptado a un navegador tiene que mostrarse óptimamente en un smartphone. No solamente los elementos se reducen de tamaño, sino que el orden en que se muestran también cambia. La "caja flexible" lo hace muy sencillo.</p> + +<pre class="brush:html;"> +<!DOCTYPE html> +<html lang="en"> + <head> + <style> + + body { + font: 24px Helvetica; + background: #999999; + } + + #main { + min-height: 800px; + margin: 0px; + padding: 0px; + display: -webkit-flex; + display: flex; + -webkit-flex-flow: row; + flex-flow: row; + } + + #main > article { + margin: 4px; + padding: 5px; + border: 1px solid #cccc33; + border-radius: 7pt; + background: #dddd88; + -webkit-flex: 3 1 60%; + flex: 3 1 60%; + -webkit-order: 2; + order: 2; + } + + #main > nav { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 1; + order: 1; + } + + #main > aside { + margin: 4px; + padding: 5px; + border: 1px solid #8888bb; + border-radius: 7pt; + background: #ccccff; + -webkit-flex: 1 6 20%; + flex: 1 6 20%; + -webkit-order: 3; + order: 3; + } + + header, footer { + display: block; + margin: 4px; + padding: 5px; + min-height: 100px; + border: 1px solid #eebb55; + border-radius: 7pt; + background: #ffeebb; + } + + /* Too narrow to support three columns */ + @media all and (max-width: 640px) { + + #main, #page { + -webkit-flex-flow: column; + flex-flow: column; + } + + #main > article, #main > nav, #main > aside { + /* Return them to document order */ + -webkit-order: 0; + order: 0; + } + + #main > nav, #main > aside, header, footer { + min-height: 50px; + max-height: 50px; + } + } + + </style> + </head> + <body> + <header>header</header> + <div id='main'> + <article>article</article> + <nav>nav</nav> + <aside>aside</aside> + </div> + <footer>footer</footer> + </body> +</html></pre> + +<h2 id="Área_de_juego">Área de juego</h2> + +<p>Hay varias áreas de juego de "cajas flexibles" disponibles on-line para experimentar:</p> + +<ul> + <li><a href="http://demo.agektmr.com/flexbox/" title="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li> + <li><a href="http://the-echoplex.net/flexyboxes" title="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li> +</ul> + +<h2 id="Cosas_a_tener_en_mente">Cosas a tener en mente</h2> + +<p>El algoritmo de las "cajas flexibles" puede ser un poco complejo de entender a veces. Hay una serie de cosas a considerar para evitar "sorpresas" cuando se utilizan las "cajas flexibles".</p> + +<p>Las "cajas flexibles" se comportan en función del <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode" title="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">modo de escritura</a> establecido. Esto siginifica que <strong>inicio principal</strong> (<strong>main start</strong>) y <strong>fin principal</strong> (<strong>main end</strong>) se disponen de según la posición de <strong>inicio</strong> (<strong>start</strong>) y <strong>fin</strong> (<strong>end</strong>).</p> + +<p><strong>inicio secundario (cross start)</strong> y <strong>fin secundario</strong> (<strong>cross end)</strong> confían en la definición de la posición <strong>inicio</strong> (<strong>start)</strong> o <strong>antes</strong> (<strong>before)</strong> que depende del valor de <a href="/en/CSS/direction" title="direction"><code>direction</code></a>.</p> + +<p>Los saltos de página son posibles en el diseño de "cajas flexibles" siempre que la propiedad <code>break-</code> lo permita. Las propiedades CSS3 <code>break-after</code>, <code>break-before</code> y <code>break-inside</code> así como las propiedades CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> y <code>page-break-inside</code> se aceptan en los contenedores flexibles, también en los elementos flexibles que ellos contienen, y también en los elementos que esos elementos flexibles a su vez contienen.</p> + +<h2 id="Compatibilidad_de_Navegadores">Compatibilidad de Navegadores</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caraterística</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatGeckoDesktop("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> + {{ CompatGeckoDesktop("22.0") }}</td> + <td>21.0{{ property_prefix("-webkit") }}</td> + <td>10{{ property_prefix("-ms") }}(partial)</td> + <td>12.1</td> + <td>3.1{{ property_prefix("-webkit") }}(partial)<br> + 6.1{{ property_prefix("-webkit") }}<br> + 9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Caraterística</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Soporte Básico</td> + <td>{{ CompatGeckoMobile("18.0") }}{{ property_prefix("-moz") }}(Behind a pref) [2]<br> + {{ CompatGeckoMobile("22.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>10{{ property_prefix("-ms") }}(partial)<br> + 11</td> + <td>12.1</td> + <td> + <p>3.2{{ property_prefix("-webkit") }}(partial)<br> + 7.1{{ property_prefix("-webkit") }}<br> + 9.0</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Notas">Notas</h3> + +<p>[1] Internet Explorer 10 y Safari soportan un antiguo borrador de la especificación que es incompatible. No han sido actualizados para soportar la versión final.</p> + +<p>[2] Firefox soporta solamente la "caja flexible" con una sola línea. Para activar el soporte de "caja flexible" el usuario tiene que cambiar la preferencia about:config "layout.css.flexbox.enabled" a <code>true</code>.</p> + +<p>[3] El navegador de Android hasta la versión 4.3 soporta un borrador antiguo e incompatible de la especificación. Android 4.4 ha sido actualizado para dar soporte a la versión final.</p> + +<p>[4] Mientras que en la implementación inicial en Opera 12.10 <code>flexbox </code>no estaba en el prefijo, obtuvo prefijos en las versiones de la 15 a la 16 de Opera y 15 a 19 de Opera Mobile con {{property_prefix("-webkit")}}. Este prefijo, fue eliminado de nuevo en Opera 17 y Opera Mobile 24.</p> + +<p>[5] Hasta Firefox 29, especificar <code>visibility: collapse</code> en un elemento flex causaba que fuera tratado como si fuera <code>display: none </code>en vez del comportamiento pretendido, tratándolo como si fuera <code>visibility: hidden</code>. El método alternativo sugerido es usar <code>visibility: hidden</code> para los elementos flex que debieran comportarse como si huberan sido designados <code>visibility: collapse</code>. Para más información, ver {{bug(783470)}}.</p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a href="https://github.com/philipwalton/flexbugs">El Proyecto Flexbugs</a> para información de errores en implementación de flexbox en navegadores.</li> +</ul> |