Flexbox clase 1
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>Este es un parrafo</p>
</div>
Este es un titulo
Este es un subtitulo
Este es un parrafo
Aclaracion: h1, h2 y p son elementos con display:block, osea que ocupan todo el espacio de la linea osea es contenido aparte superior y inferiormente, luego el siguiente elemento se visualice en linea abajo. Pero el contenedor flexbox realizo la inhabilitacion de esta propiedad y solo se rige por las reglas que tenga el contenedor flexible

Me hizo mucha ilusion empezarlo, con impedimentos, osea que habia que considerar el paddin y margin del texto y usar el justily-content: baseline que alinea los textos de h1 h2 inferiormente eso entendi mientras veia forma de presentar el tema
ResponderBorrar