Propiedad direction: flotados a la derecha sin salir del flujo 18.7.14
Uso de la propiedad Css direction para alterar el flujo y la colocación visual de los elementos en la páginas sin que sacarlos del flujo del documento.
Propiedad direction: flotados a la derecha sin salir del flujo
De vuelta a los orígenes de Css y algunas prácticas sencillas que han caído en desuso pero que siguen siendo tanto o más efectivas y funcionales pese a todas las novedades que han ido surgiendo.
Una de ellas es lograr una especie de "flotado a la derecha" sin tener que recurrir a la propiedad float. Esto es, alterar la colocación y visualización de ítems sin que salgan del flujo del documento.
La propiedad 'direction'
Una forma "moderna" de conseguirlo sería recurrir al flexbox y la propiedad 'flex-direction', pero eso ya está recogido y explicado en otros posts del blog. Además comencé diciendo que sería un retorno a los orígenes de Css.
Desde el inicio de los tiempos, entre las propiedades recogidas por las especificaciones está la propiedad direction y sus valores admitidos: ltr | rtl además de la palabra clave 'inherit'.
Utilizada preferentemente para indicar la dirección en la que fluye el texto, también afecta a otros elementos y su valor es heredado.
Pues haciendo uso de la declaración direction: rtl podemos lograr que los ítems aparezcan de derecha a izquierda en nuestro monitor sin necesidad de flotarlos y sin sacarlos del flujo del documento:
See the Pen GBHos by Kseso (@Kseso) on CodePen.
Mejor pinchas en "edit on codepen" y redimensionas la demo para ver su comportamiento.
Apunta que también afecta a las celdas de una tabla, sin embargo si lo declaras a las columnas sus celdas no lo heredan.
Crédito de la imagen de cabecera: en esta ocasión no he podido localizar su autor o página propietaria. ¿Lo sabes? Gracias.
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
hmmm... pero realmente quién está haciendo todo el funcionamiento es el "inline-block", ¿no? porque sin "direction" funciona igual de bien pero en cambio si se quita el "inline-block" no funiona igual...
ResponderEliminarFíjate en el orden de aparición de los ítems en el html y en la visualización.
EliminarSi colocas los ítems como elementos de bloque pasan a ocupar toda la anchura disponible de su padre y no hay alteración de flujo (colocación del primero que aparece en el html a la derecha en el viewport).