Flexbox

Flexbox en CSS3

En CSS3 se utiliza la propiedad display: flex que por defecto acomoda a los elementos de forma horizontal uno pegado al otro.

    .flex-box {
        display: flex;
    }

El resultado de aplicar esta clase a elementos del DOM es el siguiente.

    

        
Cont 1
        
Cont 2
    

Como se puede observar se mantienen un contenedor pegado al otro sin ningún tipo de distancia entre ambos y alineados a la izquierda.
Para centrar los contenedores es necesario valerse de otra propiedad que acompaña a la anterior justify-content: center.

    .flex-box {
        display: flex;
        justify-content: center;
    }

En este caso están centrados, pero si queremos que los contenedores se distribuyan a través de todo el ancho del contenedor padre utilizaremos la misma propiedad anteriormente mencionada pero con el valor justify-content: space-around

    .flex-box {
        display: flex;
        justify-content: space-around;
    }

Ahora bien, si lo que queremos es que los contenedores estén lo mas distanciados posibles es necesario utilizar otro valor que es space-between.

    .flex-box {
        display: flex;
        justify-content: space-between;
    }

En todos los ejemplos anteriores pudimos alinear los elementos de forma horizontal pero que pasa cuando el aliniamiento lo queremos realizar de forma vertical.
Para esta tarea utilizaremos la propiedad align-item: [valor]

Como se puede ver números identificadores de contenedores quedan en la parte superior del contenedor padre y la altura de los dos contenedores ocupa el 100% del alto.
si queremos centrarlos utilizamos align-items: center

    .flex-box {
        display: flex;
        justify-content: center;
        align-item: center;
    }

Flexbox en Bodystyle

Ahora vamos a ver como aplicar las propiedades antes vistas con las clases provistas por la biblioteca no solo de manera estática sino dinámica (cambiando las propiedades en función del tamaño de pantalla donde se estén mostrando los elementos).

d-flex

La clase que permite implementar flexbox en los contenedores es .d-flex que por defecto generará un alineamiento horizontal.

    

        
1
        
2
    

just-center

Ahora tomaremos el ejemplo anterior y centraremos los elementos agregando la justificación requerida.

    

        
1
        
2
    

just-around

Para cubrir todo el ancho con elementos es necesario utilizar esta clase que permitirá replicar el ejemplo de la sección anterior.

    

        
1
        
2
    

just-between

    

        
1
        
2
    

ali-center

Ahora vamos a ver como alinear el contenido de flexbox pero verticalmente, la propiedad utilizada es la descripta en la sección anterior align-items y a través de sus variantes vamos a disponer de un conjuntos de valores que van a permitir acomodar el contenido como requiera el diseño.

    

        
1
        
2
    

ali-end

El mismo concepto anterior pero envez de centrar el contenido verticalmente ahora se los alinea al final del mismo.

    

        
1
        
2
    

ali-baseline

Alinea verticamente los contenedores pero en función al contenido de los mismos pero no a los límites establecidos por los contenedores, es decir para generar el aliniamiento se basa en el contenido en este caso texto.

    

        
Esto es el contenedor 1 

                                                    alineado con flexbox
        
Esto es el contenedor 2 

                                                    Propiedad ali-baseline
    

ali-stretch

Lo que hace esta clase es brindale a los contenedores hijos el mismo alto que el contenedor padre expandiendo el alto de los contenedores.

    

        
1
        
2
    

Flexbox Responsive

En este apartado vamos a ver las funcionalidades antes vistas, pero en este caso vamos a elegir en que pantalla se van a aplicar, en ciertas oportunidades es necesario aplicar flexbox en tamaños de pantalla grandes pero en dispositivos de pantalla mas pequeños estas propiedades no encajan con el diseño.

Wrap

Es importante poder romper el flexbox en un momento determinado, en la práctica en muchas oportunidades contenedores alineados horizontamente se adaptan muy bien a tamaños de pantalla de más 1030px pero no es de esta manera para tamaños más pequeños.
La propiedad wrap no da la oportunidad de romper el flexbox establecido de manera automática o manual para que el diseño no se salga de la pantalla generando el scroll inferior y obligando al usuario a moverlo para ver el contenido completo.

Solución:

    
 
        
 
            
 
                
Título de la tarjetaNew
                Pequeña descripción
                

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
                
 
                Subs
            

        
        
        

            
 
                
Título de la tarjetaNew
                Pequeña descripción
                

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
                
 
                Subs
            
 
        
    

Wrap Manual

El concepto es idéntico al ejemplo anterior con la diferencia que somos nosotros los que vamos a decidir el momento exacto para que flexbox se rompa y los contenedores se ubiquen uno abajo del otro.

    
 
        
 
            
 
                
Título de la tarjetaNew
                Pequeña descripción
                

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
                
 
                Subs
            

        
        
        

            
 
                
Título de la tarjetaNew
                Pequeña descripción
                

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
                
 
                Subs
            
 
        
    

Justificación Variable

En muchas oportunidades no queremos romper el flexbox para alinear los elementos sino que con solo ajjustar la justificación es suficiente y podemos a partir de esto mostrar un diseño consistente.

    
    

        
1
        
2
    

Alineación Variable

Similar a lo que sucede con la justificación podemos realizarlo con la Alineación vertical, la biblioteca dispone de clases para ajustar estos valores a todo tipo de pantalla.

    
    

        
1
        
2
    

Otro ejemplo un poco mas completo es utilizar una alineación centrada en equipos grandes, una alineación al inicio en equipos medianos y la ruptura del flexbox en equipos chicos, todo esto en los mismos contenedores.

Flex Culumn-Row

Por defecto la clase d-flex establece el alineamiento de forma horizontal, pero existen ocasiones en las cuales debemos disponer de un alineamiento horizontal en determinadas circunstancias y en otras optar por un alineamiento vertical. Por esta razón existen dos clases que permiten definir esta situación.

        
        

            
 
                
 
                
Título de la tarjetaNew
                Pequeña descripción
                

                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
                
 
                    Subs
                

            
            
            

                
 
                    
Título de la tarjetaNew
                    Pequeña descripción
                    

                        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Hic ex et optio.
                    
 
                    Subs
                
 
            
        
        

Flex Reverse

Flexbox tiene propiedades para mostrar el contenido de forma inversa a como está dispuesto dentro del archivo html, la biblioteca hace uso de estas propiedades a través de dos clases que permiten llevar a cabo estas tareas.

            
            

                
1
                
2
            
        

Lo mismo sucede con las columnas.

            
           

                
1
                
2