0

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

introducir la descripción de la imagen aquí

0

1 respuesta 1

2

El problema es que en el vídeo calculan el ancho para 4 divs teniendo en cuenta un margen de 10px width:calc((100% - 10px) / 4); y en tu codigo le das un ancho fijo de 100px, así que en una capa de 600px, caben 6 sin margenes.
Esa separación vertical puede deberse a que no encaja debido algún margen o padding descontrolado al no calcularlo especificamente.

	body {
		background-color: whitesmoke;
		display: flex;
		flex-wrap: wrap;
		margin: 0px;
		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:calc((100% - 10px) / 4);
	  height: 100px;
	  justify-content: center;
	  align-items: center;
	  margin-bottom:10px;
	}
    <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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.