tengo entendido que flexbox es un modelo de layout que permite tener contenido flexible y responsive, he visto un video en youtube donde se muestra como hacer una cuadricula perfecta, he seguido todos los pasos del video pero no me da el mismo resultado, no entiendo en que estoy errando, el video es el siguiente cuadricula con flexbox de alvaro felipe
body {
background-color: whitesmoke;
display: flex;
flex-wrap: wrap;
margin: 0;
min-height: 100vh;
}
#contenidoSeccion {
width: 600px;
height: 400px;
background-color: skyblue;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div.items {
background-color: tomato;
flex: none;
width: 100px;
height: 100px;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>consultoria</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="contenidoSeccion">
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>
<div class="items">6</div>
<div class="items">7</div>
<div class="items">8</div>
<div class="items">9</div>
<div class="items">10</div>
<div class="items">11</div>
<div class="items">12</div>
</section>
</body>
</html>
reglas de maquetacion