Blog del programador: ¿Hay alguna manera de eliminar el margen creado entre los elementos flexibles?

Estoy tratando de modificar/eliminar este margen violeta.

Además, ¿hay alguna manera de especificar cuántos elementos quiero en una fila determinada? Por ejemplo, en lugar de tener 3 artículos y luego 1 artículo, quiero 3 artículos y luego otros 3 artículos.

Gracias.

Imagen: https://imgur.com/a/3RG4oMb

* {
 padding: 0;
 margin: 0;
 font-family: Georgia;
}
.row {
 width: 95%;
 height: auto;
 display: flex;
 margin: 0 auto;
 flex-flow: wrap;
 justify-content: space-around;
}
.items {
 width: 95%;
 margin: 0 auto;
}
.item img {
 vertical-align: top;
 width: 290px;
 height: 400px;
 margin: 2px auto 14px auto;
 box-shadow: 0px 0px 12px rgba(120, 17, 25,.7);
 display: block;
 opacity: 0.95;
}
.item {
 box-shadow: 0px 0px 8px #000;
 margin: 0px auto 30px auto;
 padding: 15px 0;
 width: 330px;
}
@media screen and (max-width:800px) {
.search form {
 width: 95%;
 }
.search input {
 width: 100%;
 }
.search select {
 width: 100%;
 margin-top: 5px;
 }
}

<html>
<body>
 <main>
 <div class="items">
 <div class="row">
 <div class="item">
 <img src="img/1.jpg" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 <div class="item">
 <img src="img/2.jpg" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 <div class="item">
 <img src="img/3.png" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 <div class="item">
 <img src="img/2.jpg" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 </div>
 <div class="row">
 <div class="item">
 <img src="img/1.jpg" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 <div class="item">
 <img src="img/2.jpg" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 <div class="item">
 <img src="img/1.jpg" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 <div class="item">
 <img src="img/2.jpg" />
 <h2>Lorem Ipsum</h2>
 <h3>$101</h3>
 <div class="buy_buttons">
 <button class="b_buy">Comprar</button>
 <button class="b_vista">Vista</button>
 </div>
 </div>
 </div>
 </div>
 </main>

Solución del problema

cambiar flex-flow: wrap;aflex-wrap: nowrap

En su DOM, necesita tres elementos en el contenedor de filas.<div class="row">...3 items...</div><div class="row">...3 items...</div>...

entonces funciona

*{
 padding:0;
 margin:0;
 font-family:Georgia;
}
.row { 
 height: auto;
 display: flex;
 margin: 0 auto;
 flex-wrap: nowrap;
 justify-content: center;
}
.items{
 width:95%;
 margin:0 auto;
}
.item img {
 vertical-align: top;
 width: 290px;
 height: 400px;
 margin: 2px auto 14px auto;
 box-shadow: 0px 0px 12px rgba(120, 17, 25,.7);
 display: block;
 opacity: 0.95;
}
.item {
 box-shadow: 0px 0px 8px #000;
 margin: 0px auto 30px auto;
 padding: 15px 0;
 width: 330px;
}
@media screen and (max-width:800px){
.search form {
 width: 95%;
 }
.search input {
 width: 100%;
 }
.search select {
 width: 100%;
 margin-top:5px;
 }
}

<html>
<body>
 <main>
 <div class="items">
 <div class="row">
 <div class="item">
  <img src="img/1.jpg" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 <div class="item">
  <img src="img/2.jpg" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 <div class="item">
  <img src="img/3.png" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 </div>
 <div class="row">
 <div class="item">
  <img src="img/2.jpg" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 <div class="item">
  <img src="img/1.jpg" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 <div class="item">
  <img src="img/2.jpg" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 </div>
 <div class="row">
 <div class="item">
  <img src="img/1.jpg" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 <div class="item">
  <img src="img/2.jpg" />
  <h2>Lorem Ipsum</h2>
  <h3>$101</h3>
  <div class="buy_buttons">
  <button class="b_buy">Comprar</button>
  <button class="b_vista">Vista</button>
  </div>
 </div>
 </div>
 </div>
 </div>
 <!-- <div class="cicons">
 <a href="https://twitter.com" target="_blank"><img src="img/tw.png" /></a>
 <a href="https://instagram.com" target="_blank"><img src="img/ig.png" /></a>
 <a href="#" target="_blank"><img src="img/wpp.png" /></a>
 </div>-->
 </main>

Blog del programador

GOOGLE ADS

sábado, 16 de abril de 2022

¿Hay alguna manera de eliminar el margen creado entre los elementos flexibles?

Solución del problema

No hay comentarios.:

Publicar un comentario

Flutter: error de rango al acceder a la respuesta JSON