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>
Adding space between flexbox items
There a few things you have to consider.
First of all; with justify-content
you define how remaining space is handled. By using space-between
your items will be aligned so that the space between them is equal, by setting it to center
the remaining space will be around all items, with all items stuck together.
In your case though, there is no remaining space, because your items actually stretch the div. So that doesn't help you.
Next; you've set the width of an item to 50%
. Which is fine, your item
's will be 50% of the viewport. That's because your grid will implicitly be 100% of the viewport. But because your image overflows the box, you can set margins if you want, and they will put the items further apart, but you need big-ass margins to actually see them. Bigger then the overflowing of your image.
So, to fix this, you make the images responsive by making them as width as the item;
.item img { display: block; height: auto; width: 100%; }
But that poses another problem; flexbox tries to size it's flex items to fit it all into the flex container. So you'll see that it automatically resizes your items so they will all fit in. To fix this, you have to explicitly force the width of your items;
.item { flex: 0 0 50%; }
Which is a shorthand for;
.item { flex-grow: 0; flex-shrink: 0; flex-basis: 50%; }
So basically you say; make my item 50% of it's container, and don't use your awesome algorithm to try to make it bigger or smaller.
Now you've got what you want, and you can use margin-right: 20px
for example to create a 20px space between your items.
Full snippet;
.grid { display: flex; width: 100%; }
.item { flex: 0 0 50%; margin-right: 20px; }.item img { display: block; height: auto; width: 100%; }
.article-scroll-mobile { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); flex-wrap: nowrap; text-align: center; overflow-x: auto; -webkit-overflow-scrolling: touch; /*For iOS smooth scroll effect*/}
<div class="grid article-scroll-mobile"> <div class="item"> <img src="https://www.w3schools.com/howto/img_fjords.jpg"> </div> <div class="item"> <img src="https://www.w3schools.com/howto/img_fjords.jpg"> </div> <div class="item"> <img src="https://www.w3schools.com/howto/img_fjords.jpg"> </div> <div class="item"> <img src="https://www.w3schools.com/howto/img_fjords.jpg"> </div> <div class="item"> <img src="https://www.w3schools.com/howto/img_fjords.jpg"> </div> <div class="item"> <img src="https://www.w3schools.com/howto/img_fjords.jpg"> </div></div>
Spacing between flexbox items
The CSS spec has recently been updated to apply gap
properties to flexbox elements in addition to CSS grid elements. This feature is supported on the latest versions of all major browsers. With the gap
property, you can get what you want with just gap: 10px
(or whatever size you want).
Set space-between between flex list items
Using margin-left
on the last element is a good solution. However, you can improve your implementation by using the :last-child
selector:
ul li:last-child {
margin-left: 10px;
}
Instead of manually assigning the last
class to the last child.
EDIT: If you mean you want your last child to be aligned all the way to the right. You can separate them into different lists, and use justify-content: space-between
:
.container {
max-width: 1000px;
background-color: lightblue;
display: flex;
justify-content: space-between;
}
ul {
display: flex;
}
ul li {
width: 3rem;
}
.right li {
background-color: red;
}
<div class="container">
<ul class="left">
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ul class="right">
<li>Item</li>
</ul>
</div>
Creating a space between flex items in nested flexbox
Set Width of nav-links or use column-gap
.navbar-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav-links {
width: 300px;
// column-gap: 30px;
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="navbar-container">
<a href="index.html">
<div class="logo">
<img src="./media/logo.svg" alt=" logo" height="80px" width="80">
</div>
</a>
<ul class="nav-links">
<li class="nav-link">
<a href="#">Install</a>
</li>
<li class="nav-link">
<a href="#">Learn</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
<li class="nav-link">
<a href="#">item</a>
</li>
</ul>
</div>
</body>
</html>
How can I set a minimum amount of space between flexbox items?
You can add another div with flex style for holding the needed gap between inner divs. and for the minimum width for that gap use this property (as mentioned in W3Schools.com):
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
which flex-shrink is :
flex-shrink: A number specifying how much the item will shrink relative to the rest of the flexible items
so, for example you set this css code for the gap div :
flex: 1 0 10px;
that tells gap div will have 10px width, and will grow relative to the rest of the flexible items, but WON'T SHRINK. so the minimum width will be 10px at the narrowest width of the screen.
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>
CSS3 Flexbox spacing between items
Nope - you're not missing anything. Flexbox is terrific for ordering elements and defining the general alignment of those elements along either the main or cross axes, but doesn't speak directly to individual item spacing. If you take a look at this Codepen used in the Flexbox article, you'll notice they use:
margin-top: 10px
to define element spacing. Hope this helps!
CSS Flexbox with Margin Spacing Causing Unwanted Stretch of Items
Why not remove the margin from the :after
pseudo element and use padding on the main element? (also added box-sizing on main element):
.items {
display: flex;
flex-wrap: wrap;
}
.items>* {
flex: 1;
flex-basis: 25%;
padding: 5px;
box-sizing: border-box;
}
.items>*:after {
content: '';
display: block;
background: #000;
padding-bottom: 100%;
border-radius: 100%;
}
<div class="items">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Related Topics
How to Pass a Parameter to a CSS Class Using Less
@Font-Face Does Not Work Properly for Italic/Bold Fonts
>*' Selector Not Working from Parent to Child Component
How to Select Element with Specific Content or Attribute in CSS
How to Include a Custom CSS File in Typo3
What Exactly Does This CSS Selector with a Comma Match
HTML5 Footer - Margin That I Can't Remove
Class Selector Not Working in CSS, But Id Works for Add Some Styles
Is It Possible in CSS to Transition Through a Third Color When Using a Hover Transition
Facebook Like Button - How to Disable Comment Pop Up Box
Flex-Basis for Wrapping Columns
Tell Less to Not Freak Out in Certain Special Cases and Ignore Weird Characters
Is There Any Possibilty Using CSS-Variables in Sass
How to Select Nth Child of Specific Tag with CSS
Question About CSS Files for Smartgwt Project