How to Add 1Px Margin to a Flex Item That Is Flex: 0 0 25%

How to add 1px margin to a flex item that is flex: 0 0 25%?

You can use flex: 1 0 22% for example. This will allow your element to be defined by 22% as flex-basis (so only 4 elements per row) and they will grow to fill the remaining space left by margin (since flex-grow is set to 1)

#foto-container {  display: flex;  flex-wrap: wrap;  justify-content: space-around;  margin: 10px;}
.foto { flex: 1 0 22%; min-height: 50px; margin: 1px; background-color: red;}
<div id="foto-container">  <div class="foto foto1">1</div>  <div class="foto foto2">2</div>  <div class="foto foto3">3</div>  <div class="foto foto4">4</div>  <div class="foto foto5">5</div>  <div class="foto foto6">6</div>  <div class="foto foto7">7</div>  <div class="foto foto8">8</div>  <div class="foto foto9">9</div>  <div class="foto foto1">1</div>  <div class="foto foto2">2</div>  <div class="foto foto3">3</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 correctly set flex item to 50% percent when gap is used?

You can try to use grid or flex either work but I would do this way. If this is what you mean Let me know.

.flexbox-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 1em;
}

.flexbox-item {
width: 100%;
background-color: lightgreen;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}

.flexbox-container2 {
display: flex;
grid-gap: 1em;
}


.flexbox-item2 {
width: 100%;
background-color: lightgreen;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
}

@media screen and (max-width: 992px) {
.flexbox-container {
display: grid;
grid-template-columns: auto auto;

}

.flexbox-container2 {
display: flex;
flex-wrap: wrap;
grid-gap: 1em;
}

.flexbox-item2:nth-child(2n + 1),
.flexbox-item2:nth-child(2n + 2) {
flex: 0 0 calc(50% - 10px);

}
}
<h1>This is the grid way</h1>
<div class="flexbox-container">
<div class="flexbox-item">Item 1</div>
<div class="flexbox-item">Item 2</div>
<div class="flexbox-item">Item 3</div>
<div class="flexbox-item">Item 4</div>
</div>

<br>

<h1>This is the flex way</h1>
<div class="flexbox-container2">
<div class="flexbox-item2">Item 1</div>
<div class="flexbox-item2">Item 2</div>
<div class="flexbox-item2">Item 3</div>
<div class="flexbox-item2">Item 4</div>
</div>

I want flexbox children to take 50% of their parent's width AND also have a 10px gap between them. How can I achieve this?

try this solution

.projects {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction:row;
}
.project {
flex:0 1 calc(50% - 10px);
margin: 5px;
}
.project:nth-child(1) {
background-color: green;
}
.project:nth-child(2) {
background-color: red;
}
.project:nth-child(3) {
background-color: blue;
}
<div class='projects'>
<div class='project'>s</div>
<div class='project'>s</div>
<div class='project'>s</div>
</div>

CSS Flexbox Gap - gap value affecting width calculation

You could define the gap in a CSS custom property and then calculate the width of the items with a little bit of math.

.container {
--gap: 20px;
--columns: 4;
display: flex;
max-width: 800px;
width: 100%;
background: gold;
flex-wrap: wrap;
gap: var(--gap);
}

.item {
width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
background: teal;
}
<div class="container">

<div class="item">
Item 1
</div>

<div class="item">
Item 2
</div>

<div class="item">
Item 3
</div>

<div class="item">
Item 4
</div>

<div class="item">
Item 5
</div>

<div class="item">
Item 6
</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>


Related Topics



Leave a reply



Submit