maxidato

Situacion 1 elemento uno importante elemento dos importante prioritario elemento tres Ahora la teoria no es que todos los elementos entren en una misma linea sino que bayan de uno entrandon en el contenedor, si el elemento entra en la linea, perfecto intentara con el segundo elemento si este no entra lo bajara en la linea de abajo como elemento nuevo y asi sucesivamente. Observacion si un elemento excede el ancho al ancho del contenedor este vuelve a actual como si fuera la premisa de que todo entre en la linea y si no entra entonces ir bajando palabras en lineas inferiores en el mismo contendedor del elemento

  Me alegra explicar este tema, ya que me parecio confuso a primer momento, lo tuve que razonar y llegue a conclusiones de tres fases de flexbox  situacion 1: cuando los elementos en total ocupan menos al ancho del contenedor. situacion 2: cuando exceden los elementos al contenedor, trata de reducir la cantidad de palabras bajandolas en lineas inferiores y logra que entren todo. situacion 3: cuando ni aun separando la cantidad de palabras, y excede los elementos al contenedor Razonemos, cumple la propiedad de los elementos siguan en lina horizontal aunque excedan al ancho del contenedor Una solucion a este problema es que no tenga que reducir palabras sino que las muestre todas y si el siguiente excede al contenedor, dicho elemento baje ala linea de abajo con su tamaño completo y asi se formaria una linea cortada si no entra baja abajo la linea y sigue, si no entra dos en las dos lineas agrega una tercera linea y asi sucesivamente  

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;

existen varias formas de alinear los elementos en el contenedor flexbox  se tratan de alineaciones segun el espacio en tre elementos

Empecemos, que es flexbox? Es atraves de usar un contenedor, se puede poner reglas de ordenacion, de sus elementos en una direccion, ya sea elementos uno tras otro en forma horizontal o vertical okey digamos mas pensemos que ordene el espacio entre elementos en partes iguales automatico, eso lo veremos mas adelante, nos centraremos ahora en lo mas basico declarar un contenedor sea flexible  Ejemplo sencillo para que sea elementos ordenados horizontalmente solo es necesario poner al contenedor el css "display: flex" en el ejemplo pusimos colores de fondo para el h1, h2 y p solo para que se visualice mejor su forma ademas los margenes que hay respecto al contenedor es por el propio margin que genera por defecto los h1,h2 y p <style> h1{background-color: yellow} h2{background-color: skyblue} p {background-color: lightgreen} </style> <div style="display:flex"> <h1>Este es un titulo</h1> <h2>Este es un subtitulo</h2> <p>Es...