Información
El tema que ha solicitado se muestra abajo. Sin embargo, este tema no se encuentra en la biblioteca.

Diseño de cajas flexibles ("Flexbox") en Internet Explorer 10

Nota  Este contenido se aplica al diseño de cajas flexibles de CSS en Internet Explorer 10. Para obtener información general más actual sobre las cajas flexibles, consulta Diseño de cajas flexibles.
Precaución  Internet Explorer 11 ya no admite la versión del prefijo de proveedor de Microsoft ("-ms-") de las propiedades de caja flexible. En su lugar, puedes utilizar nombres sin prefijo, práctica que se prefiere por su mejor cumplimiento de los estándares y compatibilidad en el futuro. Consulta Actualizaciones de diseño de caja flexible ("Flexbox") para ver un resumen de los cambios y los procedimientos recomendados.

Internet Explorer 10, así como las aplicaciones de la Tienda Windows con JavaScript en Windows 8, son compatibles con el módulo de diseño de caja flexible CSS ("Flexbox"). En el momento de redactar este documento, el módulo de caja flexible es un borrador de trabajo del World Wide Web Consortium (W3C). (La implementación de la caja flexible en Internet Explorer 10 se basa en la versión del 22 de marzo de 2012 del borrador de trabajo de caja flexible). Flexbox agrega los cuatro modos de diseño básicos definidos en las Hojas de estilo CSS, nivel 2, revisión 1 (CSS2.1) (y habilitados a través de la propiedad display): diseño de bloques, diseño alineado, diseño de tablas y diseño posicionado. El diseño de caja flexible está destinado al diseño de páginas web más complejas. Es especialmente útil para hacer que la posición relativa y el tamaño de los elementos se mantengan constantes, incluso cuando los tamaños de ventana del navegador y la pantalla varían y cambian. Puede reducir la dependencia de los flotantes, cuyo tamaño y posición son más difíciles de ajustar correctamente.

El diseño flexbox tiene en cuenta el espacio disponible cuando se definen las dimensiones de la caja, lo que permite utilizar tamaños y posicionamientos relativos. Por ejemplo, puedes asegurar que el espacio en blanco extra de la ventana de un explorador se distribuya homogéneamente según el tamaño de varios elementos secundarios, y que estos elementos secundarios estén centrados en el medio del bloque que los contiene.

Con el diseño flexbox puedes:

  • Construir un diseño fluido—incluso cuando uses tamaños de pantalla y de ventana del explorador diferentes—pero que contenga elementos (como imágenes o controles) que mantengan su posición y su tamaño relativos.
  • Especificar cómo se puede asignar de manera proporcionada el espacio sobrante a lo largo del eje de diseño (horizontal o vertical) de una serie de elementos para aumentar el tamaño de algunos elementos concretos.
  • Especificar cómo se puede asignar el espacio sobrante a lo largo del eje de diseño de una serie de elementos para colocarlo antes, después o entre las series de elementos.
  • Especificar cómo se puede ajustar el espacio sobrante perpendicular al eje de diseño de un elemento alrededor del elemento; por ejemplo, el espacio extra encima o debajo de botones que se han diseñado en paralelo.
  • Controlar la dirección en la que los elementos se disponen en la página—por ejemplo, de arriba a abajo, de izquierda a derecha, de derecha a izquierda o de abajo a arriba.
  • Reordenar los elementos de la pantalla con un orden diferente al que especifica el Document Object Model (DOM).

El contenedor flexbox

Para habilitar el diseño de caja flexible, primero debes crear un contenedor de caja flexible. Para ello, establece la propiedad display de un elemento en "-ms-flexbox" (para un contenedor de caja flexible de nivel de bloque) o "-ms-inline-flexbox" (para un contenedor de caja flexible alineado). (Debido al estado preliminar del borrador de trabajo del módulo de diseño de caja flexible CSS, este valor y todas las propiedades de esta sección deben usarse con el prefijo de proveedor específico de Microsoft, "-ms-", para trabajar con Internet Explorer 10 y las aplicaciones de la Tienda Windows con JavaScript en Windows 8). Por ejemplo, la siguiente muestra de código crea un contenedor de caja flexible de nivel de bloque dentro del elemento que tiene un identificador "myFlexbox":


<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  background: gray;
  border: blue;
}
</style>


Determinar la orientación de flexbox

Al crear un contenedor flexbox, también puedes establecer su orientación—es decir, especificar si sus elementos secundarios se mostrarán de derecha a izquierda, de izquierda a derecha, de arriba a abajo o de abajo a arriba. Para hacerlo se usa la siguiente propiedad:

PropiedadDescripción

-ms-flex-direction

Especifica la orientación en el diseño de todos los elementos secundarios del objeto.

Los posibles valores para esta propiedad son las siguientes palabras clave:

row

Este es el valor inicial. Los elementos secundarios se muestran en el mismo orden en que se declaran en el documento de origen, de izquierda a derecha.

Ejemplo de -ms-box-orient:horizontal
column

Los elementos secundarios se muestran en el mismo orden en que se declaran en el documento de origen, de arriba abajo.

Ejemplo de -ms-box-orient:vertical
row-reverse

Los elementos secundarios se muestran en orden inverso al que se declaran en el documento de origen, de derecha a izquierda.

Ejemplo de -ms-box-direction:normal
column-reverse

Los elementos secundarios se muestran en orden inverso al que se declaran en el documento de origen, de abajo a arriba.

inherit

Los elementos secundarios se muestran en el mismo orden que el valor calculado de esta propiedad para el elemento primario.

 

Por ejemplo, el siguiente selector de identificador agregó la propiedad -ms-flex-direction y la estableció en row:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-direction: row;
  background: grey;
  border: blue;
}
</style>


Determinar la alineación de flexbox

Al crear un contenedor flexbox, también puedes establecer su alineación—es decir, especificar en qué dirección deben mostrarse sus elementos secundarios, perpendiculares al eje de diseño definido por la propiedad -ms-flex-direction.

PropiedadDescripción

-ms-flex-align

Especifica la alineación (perpendicular al eje de diseño definido por la propiedad -ms-flex-direction) de los elementos secundarios del objeto.

Los posibles valores para esta propiedad son las siguientes palabras clave. Ten en cuenta que son palabras clave dependientes de writing-mode; tanto el borde inicial del elemento primario como los elementos secundarios y el borde final de los elementos secundarios dependen de la dirección del diseño. Por ejemplo, para un diseño de izquierda a derecha, el borde inicial es el borde superior del elemento primario; para un diseño de arriba abajo, el borde inicial es el borde izquierdo del elemento primario y así sucesivamente. De igual modo, para un diseño de izquierda a derecha, el extremo de final de los elementos secundarios es el borde inferior; para un diseño de arriba abajo, el borde final de los elementos secundarios es el borde derecho y así sucesivamente.

start

Si el elemento primario tiene un valor calculado para -ms-flex-direction de row o column, el borde inicial (o línea base) de cada elemento secundario se alinea con el borde inicial del objeto. Todo el espacio restante, perpendicular al eje de diseño, se coloca después del borde final de cada elemento secundario.

Si el elemento primario tiene un valor calculado para -ms-flex-direction de row-reverse o column-reverse, el borde final (o línea base) de cada elemento secundario se alinea con el borde final del objeto. Todo el espacio restante, perpendicular al eje de diseño, se coloca antes del borde inicial de cada elemento secundario.

Ejemplo de -ms-box-align:before
end

Si el elemento primario tiene un valor calculado para -ms-flex-direction de row o column, el borde final de cada elemento secundario se alinea con el borde final del objeto. Todo el espacio restante, perpendicular al eje de diseño, se coloca antes del borde inicial de cada elemento secundario.

Si el elemento primario tiene un valor calculado para -ms-flex-direction de row-reverse o column-reverse, el borde inicial de cada elemento secundario se alinea con el borde inicial del objeto. Todo el espacio restante, perpendicular al eje de diseño, se coloca después del borde final de cada elemento secundario.

Ejemplo de -ms-box-align:after
center

Cada elemento secundario se centra entre los bordes inicial y final del objeto. Todo el espacio restante, perpendicular al eje de diseño, se distribuye uniformemente antes y después de cada elemento secundario.

Ejemplo de -ms-box-align:middle
stretch

Este es el valor inicial. Cada elemento secundario se estira para rellenar completamente el espacio disponible perpendicular al eje de diseño. Si está establecido, las propiedades max-width o max-height de un elemento secundario tienen prioridad y el diseño sigue la regla start.

Ejemplo de -ms-box-align:stretch
baseline

Las líneas de base (borde inicial o borde final en función de la propiedad -ms-flex-direction) de todos los elementos secundarios se alinean entre sí.

El elemento secundario que ocupa más espacio, perpendicular al eje de diseño, sigue la regla start; las líneas base de todos los elementos restantes se alinean con la línea base de este elemento.

Ejemplo de -ms-box-align:baseline

 

Por ejemplo, el siguiente selector de identificador agregó la propiedad -ms-flex-align y la estableció en start:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-align: start;
  background: grey;
  border: blue;
}
</style>


Distribuir espacios en blanco entre elementos secundarios de flexbox

Puedes especificar la distribución del espacio en blanco entre los elementos secundarios de flexbox con la siguiente propiedad:

PropiedadDescripción

-ms-flex-pack

Especifica cómo se distribuye el espacio sobrante (a lo largo del eje definido por la propiedad -ms-flex-direction) entre los elementos secundarios del objeto.

Los posibles valores para esta propiedad son las siguientes palabras clave. Ten en cuenta que son palabras clave dependientes de writing-mode; los bordes iniciales y finales del elemento principal y los elementos secundarios dependen de la dirección del diseño. Por ejemplo, para un diseño de izquierda a derecha, el borde inicial es el borde izquierdo del elemento primario. Para un diseño de arriba abajo, el borde inicial es el borde superior y así sucesivamente. De igual modo, el borde final de un elemento secundario es el borde derecho en un diseño de izquierda a derecha, el borde inferior en un diseño de arriba abajo y así sucesivamente.

start

Este es el valor inicial. El borde inicial del primer elemento secundario se coloca en el inicio del elemento primario; el borde inicial del siguiente elemento secundario se coloca contorno contra contorno con el borde final del primer elemento secundario; y así sucesivamente a lo largo de la dirección del eje de diseño. Todo el espacio que permanece a lo largo del eje de diseño se coloca al final del eje de diseño.

Ejemplo de -ms-box-pack:start
end

El borde final del primer elemento secundario se coloca al final del elemento primario. El borde final del siguiente elemento secundario se coloca contorno a contorno con el borde inicial del primer elemento secundario, y así sucesivamente a lo largo de la dirección del eje de diseño. Todo el espacio que permanece a lo largo del eje de diseño se coloca al comienzo del eje de diseño.

Ejemplo de -ms-box-pack:end
center

Todos los elementos secundarios se colocan contorno contra contorno con otros, como se describe en las descripciones de las palabras clave start o end. Sin embargo, el grupo de elementos secundarios se centra entre los bordes inicial y final del elemento primario para que todo el espacio restante se distribuya uniformemente antes del primer elemento secundario y después del último elemento secundario.

Ejemplo de -ms-box-pack:center
justify

El borde inicial del primer elemento secundario se coloca al inicio del elemento primario. El borde final del último elemento secundario se coloca contorno contra contorno con el final de la caja principal; y todos los elementos secundarios restantes se colocan entre los elementos secundarios inicial y final, para que el espacio que queda a lo largo del eje de diseño se distribuya de igual manera entre los elementos secundarios.

Ejemplo de -ms-box-pack:justify

 

Por ejemplo, el siguiente selector de identificador agregó la propiedad -ms-flex-pack y la estableció en justificar:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  background: grey;
  border: blue;
}
</style>


Habilitar el ajuste de elementos secundarios

Puedes habilitar que los elementos secundarios de flexbox que desborden se ajusten a la siguiente línea y controlar la dirección del flujo con la siguiente propiedad:

PropiedadDescripción

-ms-flex-wrap

Especifica si los elementos secundarios se ajustan en varias líneas o columnas, según el espacio disponible en el objeto.

Los posibles valores para esta propiedad son las siguientes palabras clave:

none

Este es el valor inicial. Todos los elementos secundarios se muestran en una sola fila o columna. La propiedad overflow del objeto determina si los elementos secundarios son ocultos, recortados o desplazables.

wrap

Los elementos secundarios se encapsulan y se muestran en filas o columnas paralelas y sucesivas. El objeto se expande en alto o ancho, de forma perpendicular al eje definido por la propiedad writing-mode, para acomodar las filas o columnas adicionales.

Ejemplo de -ms-box-line-progression:normal
wrap-reverse

Los elementos secundarios se ajustan y se muestran en filas o columnas paralelas y sucesivas, en orden inverso. El objeto se expande en alto o ancho, de forma perpendicular al eje definido por la propiedad writing-mode, para acomodar las filas o columnas adicionales.

Ejemplo de -ms-box-line-progression:reverse

 

Ten en cuenta que Internet Explorer 10 intenta ubicar los elementos secundarios de una caja principal en la menor cantidad de líneas posible reduciendo todas las cajas a su tamaño mínimo. Si un solo elemento no entra en su línea, lo recorta y ubica al final de la línea.

De manera predeterminada, se agregan más líneas para conservar la dirección del bloque. En diseños de izquierda a derecha, y viceversa, se agregan nuevas líneas debajo de las existentes (a menos que se haya especificado explícitamente una dirección de bloque de arriba a abajo). De manera similar, la dirección del bloque determinará si se agregarán nuevas líneas a la derecha o izquierda del diseño vertical, que puede ser de izquierda a derecha, o viceversa, según la dirección de la escritura y otras configuraciones específicas.

Por ejemplo, el siguiente selector de identificador agregó la propiedad -ms-flex-wrap y la estableció en wrap:


<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  background: grey;
  border: blue;
}
</style>


Agregar elementos secundarios a flexbox

Ahora que has creado un contenedor flexbox, puedes agregarle elementos secundarios. Para agregar un elemento secundario a un contenedor flexbox, convierte el elemento en elemento secundario inmediato del elemento flexbox, como se muestra en el siguiente marcado:


<style type="text/css">
#myFlexbox {
  background: gray;
  border: blue;
  display: -ms-flexbox;
}
#child1 {
  background: maroon; 
  border: orange solid 1px;
}
#child2 {
  background: lightgray;
  border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
  <div id="child1">child 1</div>
  <div id="child2">child 2</div>
</div>
...
</body>


Configurar la flexibilidad de un elemento secundario

Puedes controlar la distribución proporcional del exceso de espacio a lo largo del eje de diseño de la caja principal a los elementos secundarios. Con la propiedad -ms-flex, puedes hacer que los elementos flexbox sean flexibles, alterando su ancho o alto para que se ajusten al espacio disponible. Un elemento flexbox distribuye el espacio libre entre sus elementos de forma proporcional a su flexibilidad positiva, o los contrae para evitar el desbordamiento de forma proporcional a su flexibilidad negativa.

Cuando el elemento que contiene la propiedad -ms-flex es un elemento flexbox, se consulta la propiedad -ms-flex en lugar de las propiedades width o height para determinar el tamaño principal del elemento. (Si un elemento no es flexbox, la propiedad -ms-flex no tiene efecto).

PropiedadDescripción

-ms-flex

Especifica si el ancho o alto de un elemento secundario son flexibles, según el espacio disponible en el objeto. Además, este valor indica la proporción del espacio disponible que se asigna al elemento secundario. Su sintaxis es la siguiente:


-ms-flex: <positive-flex> <negative-flex> <preferred-size>

Esta propiedad puede establecerse en cualquiera de los valores siguientes o en none:

<positive-flex>

Un entero que establece la flexibilidad positiva. Si se omite, la flexibilidad positiva del elemento es "1". Un valor negativo no es válido.

<negative-flex>

Un entero que establece la flexibilidad negativa. Si se omite, la flexibilidad negativa del elemento es "0". Un valor negativo no es válido.

<preferred-size>

Establece el tamaño preferido del elemento de caja flexible. Puede ser cualquier valor válido para las propiedades width o height, excepto inherit. Si se omite, el tamaño preferido es "0px". Si el componente <preferred-size> es auto en un elemento secundario de un elemento de caja flexible, el tamaño preferido es el valor de las propiedades width o height del elemento de caja flexible (la que sea paralela al eje principal).

none

Este es el valor inicial. Equivalente a establecer -ms-flex en "0 0 auto".

 

Agrupar elementos secundarios de flexbox

Puedes agrupar elementos secundarios de flexbox usando un número de grupo para controlar el orden con el que cada elemento se representa a lo largo del eje de diseño, aunque ese orden sea diferente del orden del DOM. Usa la siguiente propiedad para especificar la agrupación:

PropiedadDescripción

-ms-flex-order

Especifica el grupo ordinal al que pertenece el elemento secundario de flexbox. Este entero identifica el orden de visualización (a lo largo del eje definido por la propiedad -ms-flex-direction) del grupo.

Los valores deben ser enteros mayores que cero. El valor inicial de esta propiedad es "0".

 

La propiedad -ms-flex-order permite colocar elementos en grupos ordinales, comenzando por el grupo ordinal 0. Todos los elementos secundarios de cada grupo ordinal son representados a lo largo del eje de diseño especificado antes de representar cualquiera de los elementos secundarios que componen el siguiente grupo ordinal. Por lo tanto, todos los elementos secundarios del grupo ordinal 0 se representarán antes que cualquiera de los elementos secundarios del grupo ordinal 1, y así sucesivamente. Los elementos que componen grupos ordinales se representan en el orden del DOM. De manera predeterminada, se agregan más líneas en la dirección del bloque.

Por ejemplo, el siguiente marcado define cuatro elementos secundarios y asigna a la mayoría de ellos un valor ordinal mediante la propiedad -ms-flex-order:

  • child1 tiene un valor de -ms-flex-order de "1"
  • child2 tiene un valor de -ms-flex-order de "0", el valor inicial
  • child3 tiene un valor de -ms-flex-order de "0"
  • child4 no tiene ninguna propiedad -ms-flex-order, lo que significa que se le asigna el valor inicial de -ms-flex-order de "0"

<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  color: white;
  font-size: 48px;
  font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: left;
  height: 200px;
  border: none;
}
#child1 {
  -ms-flex-order: 1;
  background: #43e000;  
  padding: 20px;
}
#child2 {
  -ms-flex-order: 0;
  background: #166aff;
  padding: 20px;
}
#child3 {
  -ms-flex-order: 1;
  background: #43e000;
  padding: 20px;
}
#child4 {
  background: #166aff;
  padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
  <div id="child4">4</div>
</div>
</body>


Tanto child2 como child4 están en el grupo ordinal 0, y child1 y child3 están en el grupo ordinal 1. Como en cada grupo ordinal los elementos secundarios se representan según el orden del DOM, estos elementos aparecen en el siguiente orden en el elemento flexbox principal: child2, child4, child1, child3. Puedes ver esto en la siguiente captura de pantalla:

Captura de pantalla del ejemplo anterior en una ventana de explorador

Puedes visualizar esta página. (Para poder ver correctamente esta página se requiere Internet Explorer 10.)

Temas relacionados

Diseño de cuadros flexibles

 

 

Mostrar:
© 2015 Microsoft