Removing Margin from Flex Items When They Wrap

Removing margin from flex items when they wrap

Update in late 2021

Now the gap property also works with Flexbox (on newer browser versions).

* {
margin: 0;
padding: 0;
}

html, body {
box-sizing: border-box;
}

.container {
width: 600px;
margin: 0 auto;
margin-top: 25px;
border: 1px solid;
padding: 5px;
}

.tags {
list-style-type: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
gap: 5px; /* added */
}

.tag {
padding: 5px;
background-color: #76FF03;
/* margin: 0 5px 5px; removed */
}
<div class="container">
<ul class="tags">
<li class="tag item-1">Tag Item 1</li>
<li class="tag item-2">Tag Item 2</li>
<li class="tag item-3">Tag Item 3</li>
<li class="tag item-4">Tag Item 4</li>
<li class="tag item-5">Tag Item 5</li>
<li class="tag item-6">Tag Item 6</li>
<li class="tag item-7">Tag Item 7</li>
<li class="tag item-8">Tag Item 8</li>
<li class="tag item-9">Tag Item 9</li>
<li class="tag item-10">Tag Item 10</li>
<li class="tag item-11">Tag Item 11</li>
<li class="tag item-12">Tag Item 12</li>
<li class="tag item-13">Tag Item 13</li>
<li class="tag item-14">Tag Item 14</li>
<li class="tag item-15">Tag Item 15</li>
<li class="tag item-16">Tag Item 16</li>
</ul>
</div>

Remove margin-right when flex-wrap is wraping elements with pure CSS

  .wrapper {    display: flex;    flex-wrap: wrap;    flex-direction: row;    border: 1px solid black;    width: 768px;  }
.wrapper__item { flex: 1 0 45%; /* width: 330px; */ height: 160px; margin: 0 36px 18px 0; background-color: lightcoral; }
.wrapper div:nth-child(2n) { margin-right: 0; }
  <div class="wrapper">    <div class="wrapper__item">Item</div>    <div class="wrapper__item">Item</div>    <div class="wrapper__item">Item</div>    <div class="wrapper__item">Item</div>    <div class="wrapper__item">Item</div>    <div class="wrapper__item">Item</div></div>

Flex item when wrap, change margins and paddings

Another approach could be to let the middle one to grow and push the last one.

last one can receive : margin:auto to be centered if alone on its row:

possible example:

.container {
cursor: grab;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
width: 70%;
background: #24252A;
margin: 20px auto;
height: auto;
border-radius: 5px;
box-shadow: 3px 3px 3px 3px #0d0d0d;
display: flex;
flex-wrap: wrap;
}

.container>div {
margin-right: 10px;
}

#imgBox {
width: 200px;
height: 200px;
margin:auto;
margin-top: 10px;
}

#content {
flex-grow: 1;
min-width: 200px;
margin-top: 10px;
}

#buy {
display: flex;
flex-direction: column;
justify-content: center;
margin:auto;/* optionnal to center if alone*/
}

.buy-specs {
display: flex;
flex-direction: column;
align-items: center;
}

#buy>* {
margin-left: auto;
}
<div id="container0" class="container" draggable="true" ondragstart="drag(event)">
<div id="imgBox">
<img src="https://dummyimage.com/200/349&text=pinguini" alt="" draggable="false">
</div>
<div id="content">
<h2>Pinguini Tattici Nucleari</h2>
<p id="luogo">Torino - Pala Alpitour</p>
<p>04/10/2021 | 21:00</p>
</div>
<div id="buy">
<div class="buy-specs">
<p>Prezzo: 39,10 €</p>
<div id="quantityDiv">
<p>Quantità: </p>
</div>
<button id="button0">Aggiungi al carrello</button>
</div>
</div>

Better way to set distance between flexbox items

  • Flexbox doesn't have collapsing margins.
  • Flexbox doesn't have anything akin to border-spacing for tables (edit: CSS property gap fulfills this role in newer browsers, Can I use)

Therefore achieving what you are asking for is a bit more difficult.

In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.

Demo

.upper {
margin: 30px;
display: flex;
flex-direction: row;
width: 300px;
height: 80px;
border: 1px red solid;

padding: 5px; /* this */
}

.upper > div {
flex: 1 1 auto;
border: 1px red solid;
text-align: center;

margin: 5px; /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */ {
flex-direction: column;
flex-wrap: wrap;
width: 200px;
height: 200px;
}
<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>

<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>

How do I remove margin between flex children?

You need to give the children that don't grow flex-grow:0; and the one that grows: flex-grow:1

.dashboard__main-content {  padding: 1rem 0;  display: grid;  grid-gap: 2rem;  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));  grid-template-rows: auto;  grid-auto-flow: dense;  padding: 2rem;
}
.record { display: flex; flex-grow: 1; flex-flow: column nowrap; justify-content: space-between; border: 0.08rem solid #2a5583;}
.record__image-holder { flex-grow: 0;}.record__image-holder img { display: block;}
.record__image { object-fit: cover; width: 100%;}
.record__details { padding: 0.7rem 0.5rem 0.5rem 0.5rem; margin-top: 0; margin-bottom: auto; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; flex-grow: 1; background-color: #fafafa; border-bottom: 1px solid #eee;}
.record__title { margin: 0.2rem 0;}
.record__more-btn { background: #2a5583; color: white; padding: 0.5rem 2rem; align-self: flex-end; border: 1px solid transparent; float: right; margin: 1rem;}
.record__more-btn:hover,.record__more-btn:focus { border: 1px solid #2a5583; outline: none; color: #2a5583; background: aliceblue; flex-grow: 0;}body {margin: 0;}
<section class="dashboard__main-content">  <div class="record record--red-flag record--draft">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">Stacks of cash in rubber wads</h4>      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>    </div>    <button class="record__more-btn" record-path="red-flags/1">View More</button>  </div>  <div class="record record--red-flag record--draft">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">Sanother red-flag</h4>      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>    </div>    <button class="record__more-btn" record-path="red-flags/2">View More</button>  </div>  <div class="record record--intervention record--draft">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">need intervention</h4>      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>    </div>    <button class="record__more-btn" record-path="interventions/3">View More</button>  </div>  <div class="record record--intervention record--draft">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">intervention Skope 2</h4>      <p class="record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>    </div>    <button class="record__more-btn" record-path="interventions/4">View More</button>  </div>  <div class="record record--red-flag record--investigating">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">Another red-flag tester</h4>      <p class="record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>    </div>    <button class="record__more-btn" record-path="red-flags/5">View More</button>  </div>  <div class="record record--red-flag record--draft">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">some</h4>      <p class="record__comment">s...</p>    </div>    <button class="record__more-btn" record-path="red-flags/6">View More</button>  </div>  <div class="record record--red-flag record--draft">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">where the government</h4>      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>    </div>    <button class="record__more-btn" record-path="red-flags/7">View More</button>  </div>  <div class="record record--red-flag record--draft">    <div class="record__image-holder">      <img class="record__image" src="https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="crash site">    </div>    <div class="record__details">      <h4 class="record__title">where the government</h4>      <p class="record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>    </div>    <button class="record__more-btn" record-path="red-flags/8">View More</button>  </div>
</section>

How do I eliminate this huge unwanted margin between two rows of flex items?

Aligning between multiple flex lines is handled by the align-content property - try align-content: center to eliminate the margins - see demo below:

html,body {  height: 100%;}.flex {  min-height: 100%;  display: flex;  justify-content: center;  flex-flow: row wrap;  align-items: center;  align-content: center;  background: red;}.coloring {  background: #CCC;  border-radius: 7px;  padding: 20px;  margin: 0px;}.Projects {  order: 1;  flex: 0 1 100%;}.Tribute {  order: 2;  flex: 1 1;}.Portfolio {  order: 3;  flex: 1 1;}
<section class="flex">  <div class="coloring Projects">Projects</div>  <div class="coloring Tribute">Tribute</div>  <div class="coloring Portfolio">Portfolio</div></section>

remove extra space on the right after the wrapping of items with flex-wrap, while maintaining equal spacing between items

Using grid instead of flexbox would make it easier, like this:

const App = () => {

return (
<div>
<p>see the items below, regardless of how many I have, I need to hide whatever doesn't fit on the line screen.</p>
<p>All items need to have 8px gap in between them, including the green one which does not wrap.</p>
<h5>How can this be done?</h5>
<div className="container">
<div className="wrap-container">
{Array.from({ length: 100 }).map((_, index) => <div className="item" key={index}>{index}</div>)}
</div>
<div className="non-wrap-item"> I need to be 8px from the last visible item</div>
</div>
</div>
)
}

ReactDOM.render(
<App />,
document.getElementById('app')
);
.container {
display: grid;
grid-template-columns:1fr 80px;
gap: 8px;
/* if you want some max-width, put it here instead*/
max-width: 500px;
}

.wrap-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px,1fr));
gap: 8px;
}

.item {
height: 80px;
background-color: blue;
color: white;
}

.non-wrap-item {
height: 80px;
background-color: green;
color: white;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>


Related Topics



Leave a reply



Submit