Las hojas de estilo en cascada o css, nos permiten definir la apariencia que tendrá un sitio web en esta oportunidad quiero compartir un pequeño resumen de las propiedades de flexbox que les permitirá maquetar y entender como posicionar ciertos elementos en su web.
Hablaremos de flexbox container (padres a los cuales se les aplicara la propiedad display: FLEX para definir dicho elemento como flexible), así como también cada una de las propiedades que podemos utilizar para alinear cada uno de los elementos en la posición que necesitemos.
Por otra parte hablaremos de los flex-items (hijos) y su comportamiento.
¿Que es un padre ?, Que es un hijo? Para esto debemos comprender un poco de html:
En html un padre es una etiqueta que contiene otras etiquetas dentro, por ejemplo la estructura básica de un documento html es la siguiente:
Html contiene dentro a la etiqueta head y body por esta razón html es padre y head y body son sus hijos.
El html o lenguaje de marcado de hipertexto nos permite colocar el contenido que necesitamos publicar en nuestra web, por ejemplo, texto, imágenes, videos, enlaces, entre otros. Con css le damos estilo a ese contenido, es decir, le podeos cambiar el color de fuente, modificar el tamaño, cambiar el tamaño de las imágenes y muchas cosas mas, flexbox forma parte de css y nos permite de una manera mas fácil posicionar elementos en nuestra web, a continuación les dejo el resumen de las propiedades
Flexbox Container
display: flex | inline-flex ;
Define un caja flexible de bloque o de linea
flex-direction: row | row-reverse | column | column-reverse ;
Define el eje principal y el transversal de la caja flexible
row x - principal y - transversal
column x - transversal y - principal
flex-wrap: nowrap | wrap | wrap-reverse ;
Determina la existencia o no de saltos de línea y su sentido
justify-content: flex-start | flex-end | center | space-between | space-around ;
Alineación de los hijos en el eje principal (espacio sobrante)
align-items: stretch | flex-start | flex-end | center | baseline ;
Alineación de los hijos en el eje transversal (espacio sobrante) cuando NO HAY saltos de línea (flex-wrap: nowrap)
align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
Alineación de los hijos en el eje transversal (espacio sobrante) cuando SI HAY saltos de línea (flex-wrap: wrap | wrap-reverse)
Flex-items (hijos)
los hijos no crecen por defecto, pero si se encogen para completar todo el espacio e intentan colocarse todos en una línea, cuando ya no puedan, encogerse ocurrirá un desbordamiento. La propiedad que hace que esto ocurra se llama flex-shrink, y viene de la mano con otra propiedad que también usa un numero y se llama flex-grow, la primera es encogimiento y la segunda define el crecimiento. estas propiedades actúan sobre el espacio sobrante, (flex-shrink, encojimiento y flex-grow crecimento) me diente las indicaciones que se den a través de las unidades en cada uno de las propiedades anteriores. Si le aplicamos a los items en general la propiedad flex-grow: 1 le diremos que se repartan cada uno de los elementos el espacio sobrante de manera equitativa.
flex-grow: Define crecimiento proporcional de acuerdo al espacio sobrante.
flex-shrink: Define encogimiento proporcional de acuerdo al espacio sobrante
flex-basis: Es el tamaño en el eje principal. si le colocamos 30px todos items medirán lo mismo. Si cambiamos la dirección del eje principal a column nos daremos cuenta que este valor afecta a la altura y que todos los elementos tendran 30px, Por lo tanto esta propiedad actúa sobre la altura o ancho de los items dependiendo de en qué dirección se encuentra definido el eje principal, recordemos si el eje principal es row este afectara el ancho y si el eje principal es column este afectara el alto. Por otra parte, el flex-basis es el tamaño base, tiene una peculiaridad y es que al definirlo el whitd no tiene efecto sobre los elementos ya que el flex-basis tiene mayor jerarquía.
flex: Es un short hand de las tres propiedades anteriores . ejemplo:
flex: grow shrink basis.
Se aplcaria de la siguiente manera
Flex:1 0 3
align-self: permite alinear un elemento especifico respecto al eje secundario. tiene como valores los mismos de align-items y align-content.
order: permite reescribir el orden en que un elemento es dibujado por el navegador,