html5 y css3
//

El atributo flex-direction y sus cuatro opciones en Flexbox

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

Deja una respuesta

Your email address will not be published.

html5 y css3
Anterior post

Flex e inline-flex de Flexbox en CSS y HTML

PHP Altruistas Ocio en Las Palmas
Siguiente post

La tabla o array numérico en PHP

Latest from flexbox