CSS Box Alignment Module Level 3. Alineación de cajas. 18.5.12
CSS Box Alignment Module Level 3. Alineación de cajas.
O dicho en español: "La alineación de cajas en Css". Un paso más allá del text-align o vertical-align para dominar a los elementos de bloque.
El Consorcio W3c ha publicado su propuesta para extender la alineación de elementos (Box Alignment) a los distintos modelos de caja (Box Model) existentes en Css.
Cómo define el W3c a este módulo
Este módulo contiene las características de CSS relacionadas con la alineación de las cajas dentro de sus contenedores en los distintos modelos de diseño CSS: bloques, tabla, FlexBox y cuadrícula (block layout, table layout, flexbox layout, and grid layout). La alineación de los elementos de texto y "en línea" (inline-level) se define en CSS3TEXT y CSS3LINEBOX.
Estatus y finalidad del documento
Ayer, 17 de Mayo, este documento pasó a ser oficial, con el status de "editors' draft". Hasta ahora era sólamente "Unofficial draft".
Con este documento lo que se pretende es facilitar y aumentar las formas y manera en las que alinear las cajas con Css.
Css (niveles 1 y 2) permitía la alineación del texto a través de 'text-align' y la alineación de los elementos a nivel de bloque (block) declarando los márgenes como 'auto'. Sin embargo, excepto en las celdas de tablas, la alineación vertical no era posible. Como CSS3 añade capacidades adicionales, la capacidad de alinear las cajas de diferentes dimensiones se hace más crítico.
Un resumen, por favor, del Box Alignment
La alineación en Css se puede definir en función de dos aspectos:
Según el eje: en línea horizontal vs apilamiento vertical (ejes X o Y), o
Se controla la posición de la caja con arreglo a su padre, o por el contenido de la caja misma.
La siguiente tabla resume las propiedades de alineación propuestos y su relación con las propiedades de alineación existentes en otros módulos:
| Propiedad Común | Eje | Alineación | Flexbox | Grid | Block | Cell |
|---|---|---|---|---|---|---|
| ‘justify-outside’ | inline |  elemento dentro del padre
(de hecho, se ajustan los márgenes)
| ✘ | ‘grid-row-align’ | ✔ | ✘ |
| ‘align-outside’ | stacking | ‘flex-item-align’ | ‘grid-column-align’ | ✘ | ✘ | |
| ‘justify-inside’ | inline |  contenido dentro del elemento
(se ajusta el padding)
| ‘flex-pack’ | ✔ | ✔ | ✔ |
| ‘align-inside’ | stacking | ‘flex-line-pack’ | ✔ | ✔ | ✔ | |
| ‘justify-items’ | inline |  items dentro de elementos
(controla los items secundarios ‘align/justify-outside: auto’)
| ✘ | ✔ | ✘ | ✘ |
| ‘align-items’ | stacking | ‘flex-align’ | ✔ | ✘ | ✘ |
✔ indica que la propiedad puede ser declarada y usada en ese modelo de layout.
✘ indica que la propiedad ni puede ser declarada ni usada en ese modelo de layout.
Si todo lo relativo al modelo de caja flexible (flexbox y sus items) aun te suena a chino, estás de suerte. Aquí tienes un artículo sobre él.
Puedes ampliar la información consultando el documento original: CSS Box Alignment Module Level 3. Ahí podrás encontrar el significado de las distintas propiedades propuestas y sus valores posibles, así como los conceptos e ideas que maneja.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso