1

This snippet demonstrates the problem: 

.flex-cont{
  display: flex; 
  justify-content: space-between; 
  flex-wrap: wrap; 
}
.child {
  flex-basis: 30%; 
  height: 70px; 
  margin-bottom: 25px; 
  border: 1px solid black; 
  background-color: blue; 
}
<div class="flex-cont">
  <div class="child one"></div>
  <div class="child one"></div>
  <div class="child one"></div>
  <div class="child one"></div>
  <div class="child one"></div>
</div>

I want the available space to spread in between the child elements. But when there is a row with less elements than columns, I want them to display one after the other, without an empty spot. Any ideas on how to solve this using CSS?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Ben Carp
  • 24,214
  • 9
  • 60
  • 72
  • i was about to answer this when closed .. https://codepen.io/gc-nomade/pen/oyBrRE made the pen instead – G-Cyrillus Jun 10 '18 at 20:26
  • @AndreiGheorghiu the duplicate is still buggy ;) https://codepen.io/gc-nomade/pen/rKjEEj child have a size and do not touch each others – G-Cyrillus Jun 10 '18 at 20:30
  • @G-Cyr, it's not if the flex-basis is `100% / n` and you take the margin and border into account. Here's [an example](https://codepen.io/andrei-gheorghiu/pen/ERZqYX). If you think you have a better solution for this problem, post it on the initial question. – tao Jun 10 '18 at 20:34
  • @AndreiGheorghiu still buggy somehow, there are suppose to be 3 on a row ?. calculation is simple. 3 box of 30% makes 90%, 10%% are left in the gaps in between. 30 + 10 is the margin-right needed for any child on second position on the row if last ;) box-sizing maybe ? https://codepen.io/gc-nomade/pen/YvNmPO – G-Cyrillus Jun 10 '18 at 20:36
  • @G-Cyr, this is [what I get](https://i.stack.imgur.com/POktM.png) from the updated pen I posted. And yes, if you want extra spacing you're supposed to achieve it centering the child of your desired max-width inside the flex item. It's a known limitation of flexbox model and the question ***is*** a duplicate. – tao Jun 10 '18 at 20:39
  • here is what your pen produces https://i.stack.imgur.com/57y1m.jpg , box-sizing fixes it ;) – G-Cyrillus Jun 10 '18 at 20:44
  • @G-Cyr, by the way, I happen to agree with [@cimmanon's answer](https://stackoverflow.com/a/18744786/1891677). Flexbox is not, technically, a grid system and `flex:grid;` should be used for the above layout. See Nicolás Arévalo's answer. – tao Jun 10 '18 at 20:48
  • @AndreiGheorghiu for me `::after {content:'';flex:auto;}` is not a duplicate in this case ,see my earlier pen using your duplicate answer. Your fork needs a fix , my fix was nth-child not calc() – G-Cyrillus Jun 10 '18 at 20:48
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172855/discussion-between-andrei-gheorghiu-and-g-cyr). – tao Jun 10 '18 at 20:49
  • How ever, Ben should have its answer anyway ;) – G-Cyrillus Jun 10 '18 at 20:51
  • So, in your oppinion, [SO] should reward lack of (re)search, @G-Cyr? If you think it's not a duplicate, please vote for re-opening it. In my opinion, it's a duplicate. – tao Jun 10 '18 at 21:00
  • @AndreiGheorghiu, without rejecting your last comment, I have invested time to search the topic. Thanks to the help of everyone I found a solution I am happy with. – Ben Carp Jun 11 '18 at 10:25

0 Answers0