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 propertygap
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
Htmlspecialchars() Expects Parameter 1 to Be String Array Given
Why Not Use Tables For Layout in Html
Recommended Way to Embed Pdf in Html
Why Doesn't the Height of a Container Element Increase If It Contains Floated Elements
Fill the Remaining Height or Width in a Flex Container
Disabled Form Inputs Do Not Appear in the Request
Changing the Symbols Shown in a HTML Password Field
How to Center Text (Horizontally and Vertically) Inside a Div Block
What Are the Recommendations For HTML ≪Base≫ Tag
Center One and Right/Left Align Other Flexbox Element
How to Make an Element Width: 100% Minus Padding
Does :Before Not Work on Img Elements
How to Create a Link to a Local File on a Locally-Run Web Page