Uno de los atributos en Flexbox es flex-direction y con él establecemos la dirección con la que queremos que se muestren los elementos en el apilamiento dentro de la maquetación. Esta propiedad hay que añadirla a las reglas CSS del contenedor flex (importante). Las opciones con las que contamos son las siguientes:
- row : Los elementos se apilan en fila, el primer hijo del contenedor flex es mostrado primero por la izquierda.
- column : Los elementos se apilan en columna , el primer hijo del contenedor flex es mostrado el primero de arriba.
- row-reverse : Igual que row pero se invierte el orden de aparición de los hijos del contenedor flex.
- column-reverse : Igual que column pero se invierte el orden de aparición de los hijos del contenedor flex.
Estructura básica del fichero html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/flex-direction.css">
<title>Estructura Básica-flex-direction</title>
</head>
<body>
<div id="contenedor-principal">
<h3>Contenedor Principal</h3>
<hr>
<p>Row</p>
<div class="contenedor-flex-R">
<div class="elemento-flex">elemento-R1</div>
<div class="elemento-flex">elemento-R2</div>
<div class="elemento-flex">elemento-R3</div>
<div class="elemento-flex">elemento-R4</div>
<div class="elemento-flex">elemento-R5</div>
</div>
<hr>
<p>Row Reverse</p>
<div class="contenedor-flex-RR">
<div class="elemento-flex">elemento-RR1</div>
<div class="elemento-flex">elemento-RR2</div>
<div class="elemento-flex"">elemento-RR3</div>
<div class="elemento-flex"">elemento-RR4</div>
<div class="elemento-flex"">elemento-RR5</div>
</div>
<hr>
<p>Column</p>
<div class="contenedor-flex-C">
<div class="elemento-flex">elemento-C1</div>
<div class="elemento-flex">elemento-C2</div>
<div class="elemento-flex"">elemento-C3</div>
<div class="elemento-flex"">elemento-C4</div>
<div class="elemento-flex"">elemento-C5</div>
</div>
<hr>
<p>Column Reverse</p>
<div class="contenedor-flex-CR">
<div class="elemento-flex">elemento-CR1</div>
<div class="elemento-flex">elemento-CR2</div>
<div class="elemento-flex"">elemento-CR3</div>
<div class="elemento-flex"">elemento-CR4</div>
<div class="elemento-flex"">elemento-CR5</div>
</div>
</div>
</body>
</html>
Contenido de la hoja de estilo
#contenedor-principal {
max-width: 860px;
background: whitesmoke;
padding:10px;
margin:auto;
border:2px solid rgb(0, 0, 0);
}
#contenedor-principal h3{
text-align:center;
}
.contenedor-flex-R {
display:flex;
flex-direction:row;
background: rgb(173, 255, 47);
margin:10px;
padding:10px;
}
.contenedor-flex-RR {
display:flex;
flex-direction:row-reverse;
background: rgb(255, 158, 47);
margin:10px;
padding:10px;
}
.contenedor-flex-C {
display:flex;
flex-direction:column;
background: rgb(47, 206, 255);
margin:10px;
padding:10px;
}
.contenedor-flex-CR {
display:flex;
flex-direction:column-reverse;
background: rgb(255, 47, 203);
margin:10px;
padding:10px;
}
.elemento-flex {
margin: 5px;
padding: 5px;
border: 1px solid rgb(0, 0, 0);
}
Para la propiedad display igual a flex y todas las opciones para flex-direction obtenemos:
Para la propiedad display igual a inline-flex y todas las opciones para flex-direction obtenemos:
Se puede obtener más detalle de este ejercicio en el siguiente enlace
