CODEWITHSUNDEEP
htmlcssflexbox
MaiaVictor
MaiaVictor

Reputation: 53017

How do I add space between itens inside a flexbox container, without stopping them from touching the container's border?

I have a container with fixed width. Also, it holds fixed-width, fixed-height items inside. I want the items inside the container to have a space between them, but I also want them to touch the border of the container. This way, I can't just add a margin to every item, since that would cause them not to touch the border of the container. See the snippet:

.container {
    width: 400px;
    border: 4px solid red;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    align-content: space-between;
    background-color: #AAAAFF;
}
    
.item {
    flex: 0 0 60px;
    height: 100px;
    width: 60px;
    height: 60px;
    border: 2px solid blue;
    background-color: gray;
    box-sizing: border-box;
}
<div class="container">
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
    <div class="item">foo</div>
</div>

The result is almost what I wanted, but I want to,

  1. Add a 10px space between pairs of rows;

  2. Make the last row align to the left - I don't want that huge spacing between the last items.

How is that possible?

Upvotes: 1

Views: 463

Answers (2)

Serates
Serates

Reputation: 106

I don't know if this can be done with css flex, however with all of your heights and width set the flex is rather unnecessary, using inline-block can do this easily.

.container {
    width: 400px;
    border: 4px solid red;
    display: inline-block;
    background-color: #AAAAFF;
}

.item {
    display: inline-block;
    min-width: 60px;
    height: 60px;
    border: 2px solid blue;
    background-color: gray;
    box-sizing: border-box;
}

.item:nth-child(n+7){
    margin-top: 10px;
}

note: I added the margin fix from Örvar's answer just to make the answer complete, so credit for that goes to him. Do note that if you change the width of either your items of container the n+7 might need to be adjusted, so this is not entirely dynamic, but I can see no other way to do that.

Upvotes: 2

IceCode
IceCode

Reputation: 1751

This should add the desired space between the rows.

.item:nth-child(n + 7) { margin-top: 10px; }

It is called structural-pseudo-classes, read all about it here: http://www.sitepoint.com/getting-to-know-css3-selectors-structural-pseudo-classes/

Upvotes: 3

Related Questions