Guía de Flexbox: las bases

by Silvia Mazzetta Date: 23-05-2020 css3 flexbox

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox.

Pero cuidado, no estamos hablando de una simple propiedad css, sino de un conjunto de ellas, que nos permitirán organizar, alinear y distribuir el espacio de los elementos en su elemento contenedor, incluso si no especificamos sus dimensiones o éstas son dinámicas.

CSS FLEXBOX

Como ya sabemos sabemos, la propiedad Flexbox nos proporciona una forma eficiente de alinear y distribuir el espacio entre elementos de una página.

Para trabajar con flexBox debemos de definir un elemento padre (flex-container) que tendrá su ancho (eje principal) y alto (eje transversal). El elemento padre, a su vez, contendrá los elementos flexibles (flex items).

Podemos iniciar fácilmente el modelo Flexbox mediante la propiedad display con valor flex (representando como un bloque) o inline-flex (representado como una línea).

A continuación, vamos a mostrar un ejemplo, mediante un div padre cuya clase es flex-container y varios hijos cuyas clases son flex-item:

PROPRIEDADES CHE CONTROLAN LA DIRECCIÓN

FLEX-DIRECTION:

flex-direction: row; alinea horizontalmente los elementos de izquierda a la dereha.

flex-direction: row-reverse; alinea horizontalmente los elementos de la derecha a la izquierda

flex-direction: column; alinea verticalmente los elementos de arriba hacia abajo

flex-direction: column-reverse; alinea verticalmente los elementos de abajo hacia arriba

FLEX-WRAP:

flex-wrap: wrap La propiedad de envoltura flexible especifica si las posiciones flexibles deben deslizar o no.

flex-wrap: wrap-reverse; deslizan en orden inverso

FLEX-FLOW:

flex-flow: row wrap; La propiedad flex-flow es una propiedad abreviada para establecer flex-direction y flex-wrap.

PROPRIEDADES CHE CONTROLAN LA ALINEACIÓN

JUSTIFY CONTENT:

La propriedad justify-content es usada para alinear los elementos flexibles en el eje principal.

justify-content: center ; centra los elementos en el contenedor

justify-content: flex-start; Alinea los elementos al principio del contenedor. Es la propriedad tomada por defecto.

justify-content: flex-end; Alinea los elementos al final del contenedor. Es de Default.

justify-content: space-around; muestra los elementos flexibles con espacio antes, entre y después de las líneas

justify-content: space-between; espacio-entre muestra las posiciones flexibles con espacio entre las líneas.

ALINEACION VERTICAL

La alineación vertical se realiza a través del llamado “eje transversal” (cross axis), y para ello contamos con tres propiedades diferentes, “align-items”, “align-self” y “align-content”. Aquí viene el lío, ya que si no se entiende el concepto muchas veces se obtienen resultados inesperados. Vamos a ver que nos cuenta el W3C sobre estas propiedades:

  •  “align-items” establece la alineación predeterminada para todos los elementos del contenedor, incluidos los elementos independientes.
  •  “align-self” permite alinear elementos independientes del contenedor.
  •  “align-content” alinea las líneas/filas de elementos de un contenedor.

LA PROPRIEDAD ALIGN-ITEMS

Esta propiedad es similar a justify-content, pero la diferencia es el eje a lo largo del cual funciona. Para entender mejor esto, tenéis que intentar quitar la propiedad que define la altura de los elementos hijos, y aumentar la del elemento padre:

align-items: center; centra los elementos a lo largo del eje.

.flex-container {
display: flex;
background-color:#678888;
height: 500px;
flex-flow:row wrap;
align-items:center;
}
.flex-container > div {
background-color: #f1f1f1;
padding:10px;
margin:10px;
width:100px;
height:100px;}

align-items: flex-start alinea en vertical los elementos flexibles en la parte superior del contenedor osea  posiciona los elementos desde el inicio del contenedor, es decir, a lo largo del eje transversal. . También afecta el valor de “flex-direction” al sentido de la alineación vertical.

.flex-container {
height: 300px;
display::flex;
flex-flow: row wrap;
align-items: flex-start;
background: #000fff;
}
.flex-container div {
width: 21%;
background: grey;
margin: 10px;
}

align-items: flex-end alinea los divs flexibles en la parte inferior del contenedor a lo largo del eje transversal

align-items: stretch: estira los elementos flexibles para llenar el contenedor (esto es valor predeterminado)

.flex-container{
display:flex;
flex-flow:row wrap;
justify-content:flex-start;
align-items:stretch;
background:red;
}
.flex-container > div{
width:21%;
background:grey;
margin:10px;
height:500px;
}

align-items: baseline. Alinea en vertical las líneas "base" de los elementos a lo largo del eje transversal de su contenedor. Para poder comprender este ejemplo, vamos a añadir algunos estilos diferentes a los elementos. Para que se note la diferencia, aumentamos el tamaño de la fuente delprimer elemento.

.flex-container {
display: flex;
align-items: baseline;
background-color: blue;
}
.flex-container div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container div:first-child  {
font-size: 80px;
background: orange;
}
<div class="flex-container">
<div><h1>1</h1></div>
<div><h6>2</h6></div>
<div><h3>3</h3></div> 
<div><small>4</small></div> 
</div>

LA PROPRIEDAD ALIGN CONTENT

Gestiona cómo se alinean los elementos dentro del contenedor, con múltiples líneas. La diferencia con align-items es que el primero alinea elementos, y align-content las filas cuando hay espacio extra en el eje transversal. Además, align-self, alinea los elementos de forma independiente.

align-content: space-around; distribuye las líneas a lo largo del eje transversal, igualmente espaciados;

align-content: stretch; estira las líneas para que ocupen el eje transversal completo.

align-content:center ; Los alinea en el centro del eje.

align-content: flex-start; alinea los elementos a lo largo del inicio del eje transversal.

align-content: flex-end; alinea los elementos a lo largo del extremo del eje transversal.

align-content: between; Distribuye las líneas a lo largo del eje transversal, de principio a fin

¿COMO CENTRAR PERFECTAMENTE UN DIV?

.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: blue;
}
.flex-container div {
background-color: #f1f1f1;
color: white;
width: 100px;
height: 100px;
}
<div class="flex-container">
<div></div>
</div>


Entender las diferencias entre align-items y align content

Las propiedades más curiosas e interesantes de Flexbox.

Hasta ahora hemos visto propiedades que influyen en la dirección, alineación y tamaño de elementos, filas y columnas de un contenedor Flexbox. Pero a continuación vamos a ver propiedades impresionantes, ya que con ellas podemos modificar elementos de forma independiente aumentando las posibilidades de presentación de webs e interfaces.

order:

Entre estas propiedades se encuentra “order“, y es que como hemos podido comprobar con Flexbox no nos importa el orden de maquetación de nuestros elementos, y podemos alterar ese orden con tan sólo una instrucción.

Con este ejemplo podemos entender mejor el funcionamiento de esta propiedad, y es que estamos asignando el orden/posición “1” a todos los elementos pares.

 
 

Advertencia: el orden depende en última instancia de la direcciín de los elementos dentro del contenedor flex ( establecida  con flex-direction, flex-wrap  o flex-flow ).

flex:

 flex: none | <flex-grow> <flex-shrink> <flex-basis>

 
 

NAVBAR CON FLEX

 
 

CARDS EN FLEX

 
 

Background vector created by freepik - www.freepik.com
 
by Silvia Mazzetta Date: 23-05-2020 css3 flexbox visitas : 7663  
 
Silvia Mazzetta

Silvia Mazzetta

Web Developer, Blogger, Creative Thinker, Social media enthusiast, Italian expat in Spain, mom of little 9 years old geek, founder of  @manoweb. A strong conceptual and creative thinker who has a keen interest in all things relate to the Internet. A technically savvy web developer, who has multiple  years of website design expertise behind her.  She turns conceptual ideas into highly creative visual digital products. 

 
 
 

Artículos relacionados

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Grid CSS: la unidad fraccionaria

La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las…

CSS3: Selectores avanzados y pseudo clases. Descripción, uso y ejemplos

Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para…

Que son y Como funcionan las medidas VH y VW de CSS3

  Seguro muchos de nosotros conocemos las unidades px, em, rem, % y pt, pero quizás no todos conocían o usan las unidades de medida vh y vw. Hoy vamos a conocer…

Plugins jQuery para Efectos de Transición de Páginas con CSS3

Todo el mundo sabe que si desea más tráfico en su sitio web y quiere estar en la cima de los resultados de búsqueda también debe tener la página web…

15 increíbles tutoriales para generar efectos de texto con CSS3

Normalmente para añadir efectos sobre textos utilizamos algunos trucos y efectos de Photoshop, pero si hablamos de diseño web entonces podemos conseguir efectos realmente impresionantes tan solo aplicando algo de…

8 útiles herramientas para optimizar CSS

La optimización es una parte fundamental del desarrollo y mantenimiento de un sitio web, algo que a menudo, por falta de tiempo, se nos olvida. La optimización de una web es…

25 Tutoriales CSS3 para efectos avanzados de interfaz de usuario

En este artículo os presentaremos una lista de 25 excelentes tutoriales css3 a través de los cuales podráis aprender los trucos CSS3 de las interfaces avanzadas. 1. Interactive Infographic with SVG…

Clicky