soy Kseso y esto EsCSS

Propiedad direction: flotados a la derecha sin salir del flujo

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

·Por Kseso ✎ 2
flotar elementos sin propiedad float

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.

avatar del Editor del blog

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 Don Kseso Kseso