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 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 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 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>
Related Topics
Can an Option in a Select Tag Carry Multiple Values
How to Avoid Joining All Text from Nodes When Scraping
Why Can't I Do ≪Img Src="C:/Localfile.Jpg"≫
How to Add a Browser Tab Icon (Favicon) For a Website
Reading HTML Content from a Uiwebview
How to Force a Line Break in a Long Word in a Div
How to Make an HTML Button Not Reload the Page
Make Footer Stick to Bottom of Page Correctly
Custom HTML Tag Attributes Are Not Rendered by Jsf
What Characters Are Valid in a Url
Is It Bad to Use !Important in a CSS Property