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;