flexbox clase 2 elementos verticales



Ahora haremos que los elementos sean verticales
como lo hacemos?


Para esto se usa el atributo de direccion: horizontal o vertical es decir forma fila o columna
flex-direction: row (es para elementos uno al lado del otro en una fila)
flex-direction: column (es para elementos uno abajo del otro en una columna)

Okey el contenedor quedaria asi:
.contenedor{
    display: flex;
    flex-direction: column;
}

Este es un titulo

Este es un subtitulo

Este es un parrafo



Pero la cosa no termina aqui
se puede hacer direccion inversa tanto en direccion fila como en direccion columna
a que se refiere?

osea si tenes una lista de elementos uno, dos, tres
al usar la direccion inversa de fila se veria en pantalla: tres dos uno

okey el codigo css para agregarle al contenedor inverso es:
  • flex-direction: row-reverse;
  • flex-direction: column-reverse;

Comentarios

  1. me gusto explicarlo ya que es facil de entender, usando solo un atributo, el de direccion flexible "flex-direction"

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

simulacion de oferta de trabajo

Flexbox clase 1

reflexion del frontend