Listado completo de tutoriales

66 - Flexbox - (flex-flow aplicada al contenedor)


La propiedad flex-flow es el formato resumido para inicializar las propiedades "flex-direction" y "flex-wrap".

La sintaxis para definir esta propiedad es:

flex-flow: "valor del flex-direction" "valor del flex-wrap"

Veamos ahora un ejemplo de una caja flexible con 7 items.

pagina1.html

<!DOCTYPE html>
<html>
<head>
  <title>Problema</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
  <div id="contenedor1">
    <div class="item">Caja 1</div>
    <div class="item">Caja 2</div>
    <div class="item">Caja 3</div>
    <div class="item">Caja 4</div>
    <div class="item">Caja 5</div>
    <div class="item">Caja 6</div>
    <div class="item">Caja 7</div>             
  </div>
</body>
</html>

estilos.css

#contenedor1{
  display: flex;
  flex-flow: row wrap;
  background-color: #000;  
  height: 400px;
  color:white;
  font-size:2rem;
}

.item {
  background-color: #0078A6;
  width:150px;
  height:150px;
}

Definimos la propiedad flex-flow con el valor:

  flex-flow: row wrap;

Retornar