CSS Flexbox包装第一行

Question

I'm struggling with the wrapping option of the css flexbox in combination with margins between the items.

What I'm trying to archieve is: Have a flexcontainer with wrapping enabled and a number of items with variable with and minimum width. Between these items I want to have a small gap (margin) but I don't want a margin between the item and the container on the left or right side.

Right now I'm using the first-child and last-child pseudo class but this approach doesn't work unfortunatly when the container wraps the content. See JsFiddle for a minimalistic demo.

HTML

<div class="container">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <div class="item">D</div>
    <div class="item">E</div>
</div>

CSS

.container {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid red;
}
.item {
    min-width: 100px;
    flex: 1;
    border: 1px solid black;
    margin-left: 20px;
    margin-right: 20px;
}
.item:first-child {
    margin-left: 0px;
}
.item:last-child {
    margin-right: 0px;
}

Any suggestions?

Answer 1

flexbox has some specific properties, so in your case this is what needs to be fixed:

• instead of min-width use flex-basis
• use justify-content: space-between
• to apply margin on items there's a special hack (check out the example -to fix border coherency apply a wrapper);

 .container-bg { width:100%; border: 1px solid green; overflow:hidden; } .container { display: flex; flex-wrap: wrap; justify-content: space-between; /* border: 1px solid red;*/ margin: 0 -20px; } .item { /*min-width: 100px;*/ flex: 1 0 100px;/*if you want to set 100px as min-width you'll have to set flex-shrink to 0*/ border: 1px solid black; margin: 0 20px; } /*.item:first-child { margin-left: 0px; } .item:last-child { margin-right: 0px; }*/ 

 <p>resize the window for wrapping</p> <div class="container-bg"><div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </div></div> 

EDIT :

set flex-shrink to 0 is don't want to go below a certain width..

Answer 2

If you add another wrapper around your items, you can use this dirty hack: https://jsfiddle.net/xw5uo2j1/13/

You set your main container to be 100% of the width, then your "sub" container to be 100% plus the amount of space between you're going to add. Then add the same amount of margin-right to the items.

 .maincontainer { width:100%; border: 1px solid red; } .container { display: flex; flex-flow: row wrap; justify-content:space-between; align-content:space-between; width:calc(100% + 5px); } .item { min-width: 100px; flex: 1; border: 1px solid black; margin-right:5px; } 

 <p>resize the window for wrapping</p> <div class="maincontainer"> <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </div> </div> 

Answer 3

UPDATED, with more than 5 items

Use calc and jusify-content: space-between;

 * { box-sizing: border-box; margin: 0; } .container { border: thin solid red; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -10px; } .item { border: thin solid black; -webkit-flex: 1 1 calc(20% - 20px); flex: 1 1 calc(20% - 20px); margin: 0 10px; padding: 20px; position: relative; } 

 <div class="container"> <div class="item">A</div> <div class="item">B</div> <div class="item">C</div> <div class="item">D</div> <div class="item">E</div> </div>