Twitter Facebook RSS Feed

Tutorial para utilizar FlexBox en Css   (página 2 de 3)

0

jueves, 24 de enero de 2019 a las 10:16hs por Valentina Echezuria

JUSTIFY-CONTENT

Con esta propiedad podremos colocar los items de un contenedor mediante una disposición concreta a lo largo del eje principal:

.container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
    border: 2px dashed #505050;
}

.flex-child {
    padding: 0 2rem;
    font-size: 2.5rem;
    text-align: center;
    line-height: 132px;
    color: #FFFFFF;
    width: 33.33%;
}

justify-content: flex-start

Alienación del contenido por defecto.

justify-content: flex-end

Alienación del contenido a la derecha del contenedor

justify-content: center

Alineación del contenido centrado.

justify-content: space-around

Centra el contenido dejando un espacio de separación entre las columnas.

justify-content: space-between

Deja un espacio entre columnas que ocupan todo el contenedor.

ALIGN-ITEMS

Con esta propiedad determinaremos la alineación de los elementos dentro del contenedor en el eje Y.

align-items: stretch;

Los elementos ocuparan todo el alto y ancho del contenedor.

.container{
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: stretch;
   max-width: 800px;
   height: 400px;
   margin: 0 auto;
   border: 2px dashed #505050;
}

.flex-child {
  padding: 0 2rem;
  font-size: 40px;
  text-align: center;
  line-height: 132px;
  color: #FFFFFF;
  width: 25%;
}

align-items: baseline;

Alinea los elementos en el contenedor según la base del contenido de los ítems del contenedor.

align-items:center;

Alinea verticalmente todos los items en el centro del contenedor.

.flex-child {
    padding: 0 2rem;
    font-size: 40px;
    text-align: center;
    line-height: 132px;
    color: #FFFFFF;
    width: 12%;
}

align-items:flex-start;

Alinea verticalmente todos los items en el tope del contenedor.

align-items:flex-end;

Alinea verticalmente todos los item en el fondo del contenedor.

0 comentarios »

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Buscar