Flex-box Align last row to grid

Question

I have a simple flex-box layout with a container like    grid     display  flex    flex-flow  row wrap    justify-content  space-between      Now I want the items in the last row to be aligned with the other  justify-content  space-between  should be used because the width and height of the grid can be adjusted    Currently it looks like     Here  I want the item in the bottom right to be in the  middle column   What is the simplest way to accomplish that  Here is a small jsfiddle that shows this behaviour    x000D   x000D   exposegrid   x000D    display  flex  x000D    flex-flow  row wrap  x000D    justify-content  space-between  x000D    x000D   x000D   exposetab   x000D    width  100px  x000D    height  66px  x000D    background-color  rgba 255  255  255  0 2   x000D    border  1px solid rgba 0  0  0  0 4   x000D    border-radius  5px  x000D    box-shadow  1px 1px 2px rgba 0  0  0  0 2   x000D    margin-bottom  10px  x000D    x000D   lt div class  exposegrid  gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D     lt div class  exposetab  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Oh boy  I think I found a good solution with minimal CSS and no JS  Check it out    x000D   x000D  img  width 100    x000D  li   x000D    display  inline-block  x000D    width 8em  x000D    list-style none  x000D    x000D  ul  text-align  justify   x000D   lt ul gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt img src  http   www planwallpaper com static images kitty-cat jpg    gt  x000D     lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    The key here is to remember that what we are trying to achieve is exactly what text-align  justify does   The empty elements in the HTML are there to make the last row display perfectly without changing the appearance  but might not be needed given what you are trying to achieve  For perfect balance in every situation  you need at least x-4 empty elements  x being the number of elements to display  or n-2  n being the number of column you want to display

User · Answer

Yes   We can but with some media queries  amp  Maximum no of columns are predefined   Here am using 4 columns  Check my code    x000D   x000D   container   x000D    display  flex  x000D    display  -webkit-flex  x000D    display  -moz-flex  x000D    flex-flow  row wrap  x000D    -webkit-flex-flow  row wrap  x000D    -moz-flex-flow  row wrap  x000D    x000D   x000D   container  item   x000D    display  flex  x000D    display  -webkit-flex  x000D    display  -moz-flex  x000D    justify-content  center  x000D    -webkit-justify-content  center  x000D    -moz-justify-content  center  x000D    flex-basis  25     max no of columns in    25    4 Columns x000D    x000D   x000D   container  item  item-child   x000D    width  130px  x000D    height  180px  x000D    background  red  x000D    margin  10px  x000D    x000D   x000D   media  max-width  360px    x000D     container  item   x000D      flex-basis  100   x000D      x000D    x000D   x000D   media  min-width 360px  and  max-width  520px    x000D     container  item   x000D      flex-basis  50   x000D      x000D    x000D   x000D   media  min-width 520px  and  max-width  680px    x000D     container  item   x000D      flex-basis  33 33   x000D      x000D    x000D   lt div class  container  gt  x000D   x000D     lt div class  item  gt  x000D       lt div class  item-child  gt 1 lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D     lt div class  item  gt  x000D       lt div class  item-child  gt  lt  div gt  x000D     lt  div gt  x000D   x000D   lt  div gt  x000D   x000D   x000D    NOTE 1  No need to create child div  It may be any other tag like  img  r whatever you want   2  If you want more columns adjust the media queries and maximum no of columns

User · Answer

Add a   after which autofills the space  No need to pollute your HTML  Here is a codepen showing it  http   codepen io DanAndreasson pen ZQXLXj   grid     display  flex    flex-flow  row wrap    justify-content  space-between      grid  after     content        flex  auto

User · Answer

I modified the example presented by Dan Andreasson by using a right border on elements to create a faux gutter  You can then use nth-child to remove the border on the last-child of the column grid count you need  here is a demo https   codepen io JacobLett pen mdVoroM  x000D   x000D     demo only    body   margin 0  padding 0  max-width 1024px  margin 0 auto     block-list   background   ccc    border 1px solid  ccc      block-list  block-list  item   background   eee       demo only         block-list  block-list  item      min-height  100px     margin-bottom  1rem      media only screen and  min-width  900px        block-list         display  -webkit-box        display  flex        flex-wrap  wrap        -webkit-box-pack  justify        justify-content  space-between        background-color   ffffff        margin  1em auto            block-list after         content            -webkit-box-flex  1        flex  auto            block-list  item         height  10em        width  25         box-sizing  border-box        border-right  10px solid white            block-list-2  block-list  item         width  50             block-list-2  block-list  item nth-child 2n          border  none            block-list-3  block-list  item         width  33 3             block-list-3  block-list  item nth-child 3n          border  none            block-list-4  block-list  item         width  25             block-list-4  block-list  item nth-child 4n          border  none               block-list-5  block-list  item         width  20             block-list-5  block-list  item nth-child 5n          border  none               block-list-6  block-list  item         width  16 66             block-list-6  block-list  item nth-child 6n          border  none         x000D   lt h2 gt 2 column lt  h2 gt   lt div class  block-list block-list-2  gt      lt div class  block-list  item  gt 1     lt  div gt      lt div class  block-list  item  gt 2     lt  div gt      lt div class  block-list  item  gt 3     lt  div gt      lt div class  block-list  item  gt 4     lt  div gt      lt div class  block-list  item  gt 5     lt  div gt      lt div class  block-list  item  gt 6     lt  div gt   lt  div gt   lt h2 gt 3 column lt  h2 gt   lt div class  block-list block-list-3  gt      lt div class  block-list  item  gt 1     lt  div gt      lt div class  block-list  item  gt 2     lt  div gt      lt div class  block-list  item  gt 3     lt  div gt      lt div class  block-list  item  gt 4     lt  div gt      lt div class  block-list  item  gt 5     lt  div gt      lt div class  block-list  item  gt 6     lt  div gt   lt  div gt    lt h2 gt 4 column lt  h2 gt   lt div class  block-list block-list-4  gt      lt div class  block-list  item  gt 1     lt  div gt      lt div class  block-list  item  gt 2     lt  div gt      lt div class  block-list  item  gt 3     lt  div gt      lt div class  block-list  item  gt 4     lt  div gt      lt div class  block-list  item  gt 5     lt  div gt      lt div class  block-list  item  gt 6     lt  div gt   lt  div gt   lt h2 gt 5 column lt  h2 gt   lt div class  block-list block-list-5  gt      lt div class  block-list  item  gt 1     lt  div gt      lt div class  block-list  item  gt 2     lt  div gt      lt div class  block-list  item  gt 3     lt  div gt      lt div class  block-list  item  gt 4     lt  div gt      lt div class  block-list  item  gt 5     lt  div gt      lt div class  block-list  item  gt 6     lt  div gt   lt  div gt   lt h2 gt 6 column lt  h2 gt   lt div class  block-list block-list-6  gt      lt div class  block-list  item  gt 1     lt  div gt      lt div class  block-list  item  gt 2     lt  div gt      lt div class  block-list  item  gt 3     lt  div gt      lt div class  block-list  item  gt 4     lt  div gt      lt div class  block-list  item  gt 5     lt  div gt      lt div class  block-list  item  gt 6     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

If you want to align the last item to the grid use the following code   Grid container   card-grid     box-sizing  border-box    max-height  100     display  flex    flex-direction  row    -webkit-box-orient  horizontal    -webkit-box-direction  normal    justify-content  space-between    align-items  stretch    align-content  stretch    -webkit-box-align  stretch    -webkit-box-orient  horizontal    -webkit-box-direction  normal    -ms-flex-flow  row wrap    flex-flow  row wrap      card-grid after     content        flex  1 1 100     max-width  32       Item in the grid   card     flex  1 1 100     box-sizing  border-box    -webkit-box-flex  1    max-width  32     display  block    position  relative       The trick is to set the max-width of the item equal to the max-width of the  card-grid after    Live demo on Codepen

User · Answer

This version is best way for blocks with fixed width   http   codepen io 7iomka pen oxxeNE  In other cases - version of dalgard  http   codepen io dalgard pen Dbnus   x000D   x000D  body   x000D    padding  5   x000D    x000D   x000D  div   x000D    overflow  hidden  x000D    background-color  yellow  x000D    x000D   x000D  ul   x000D    display  flex  x000D    flex-wrap  wrap  x000D  justify-content center  x000D    margin  0 -4px -4px 0  x000D    list-style  none  x000D    padding  0  x000D    x000D   x000D  li   x000D    flex  1 0 200px  x000D    height  200px  x000D    max-width 200px  x000D    min-width 200px  x000D    border-right  4px solid black  x000D    border-bottom  4px solid black  x000D    background-color  deeppink  x000D    x000D  li empty   x000D    height  0  x000D    border  none  x000D    x000D   x000D     x000D   before  x000D   after   x000D    box-sizing  border-box  x000D    x000D   lt div gt  x000D     lt ul gt  x000D       lt li gt a lt  li gt  x000D       lt li gt b lt  li gt  x000D       lt li gt c lt  li gt  x000D       lt li gt d lt  li gt  x000D       lt li gt e lt  li gt  x000D       lt li gt f lt  li gt  x000D       lt li gt g lt  li gt  x000D       lt li gt h lt  li gt  x000D       lt li gt i lt  li gt  x000D       lt li gt j lt  li gt  x000D       lt li gt k lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using flexbox and a few media queries  I made this little work-around  http   codepen io una pen yNEGjv  its a bit hacky but works     container     display  flex    flex-flow  row wrap    justify-content  flex-start    max-width  1200px    margin  0 auto      item     background-color  gray    height  300px    flex  0 30     margin  10px      media  max-width  700px         flex  0 45           media  max-width  420px        flex  0 100           amp  nth-child 3n-1        margin-left  10px      margin-right  10px

User · Answer

A possible solution is to use justify-content  flex-start  on the  grid container  size restrictions on its children  and margins on the appropriate child elements -- depending on the desired number of columns   For a 3-column grid  the basic CSS would look like this    grid       display  flex      flex-flow  row wrap      justify-content  flex-start      grid  gt          flex  0 0 32       margin  1  0      grid  gt   nth-child 3n-1        margin-left  2       margin-right  2       It s another imperfect solution  but it works   http   codepen io tuxsudo pen VYERQJ

User · Answer

This is a combination of a lot of the answers but it does exactly what I was needing -- which is  aligning the last child in a flex container to the left while maintaining the space-between behavior  in this case it s a three-column layout    Here s the markup    flex-container     display  flex    justify-content  space-between    flex-direction  row      flex-container after     content        flex-basis  30

User · Answer

You can t   Flexbox is not a grid system   It does not have the language constructs to do what you re asking for  at least not if you re using justify-content  space-between   The closest you can get with Flexbox is to use the column orientation  which requires setting an explicit height   http   cssdeck com labs pvsn6t4z  note  prefixes not included   ul     display  flex    flex-flow  column wrap    align-content  space-between    height  4em      However  it would be simpler to just use columns  which has better support and doesn t require setting a specific height   http   cssdeck com labs dwq3x6vr  note  prefixes not included   ul     columns  15em

User · Answer

Simply Use Jquery Javascript trick to add an empty div   if     exposegrid   length 3  2        exposegrid   append   lt div class  exposetab  gt  lt  div gt

User · Answer

One technique would be inserting a number of extra elements  as many as the max number of elements you ever expect to have in a row  that are given zero height  Space is still divided  but superfluous rows collapse to nothing   http   codepen io dalgard pen Dbnus   x000D   x000D  body   x000D    padding  5   x000D    x000D   x000D  div   x000D    overflow  hidden  x000D    background-color  yellow  x000D    x000D   x000D  ul   x000D    display  flex  x000D    flex-wrap  wrap  x000D    margin  0 -4px -4px 0  x000D    list-style  none  x000D    padding  0  x000D    x000D   x000D  li   x000D    flex  1 0 200px  x000D    height  200px  x000D    border-right  4px solid black  x000D    border-bottom  4px solid black  x000D    background-color  deeppink  x000D    x000D  li empty   x000D    height  0  x000D    border  none  x000D    x000D   x000D     x000D   before  x000D   after   x000D    box-sizing  border-box  x000D    x000D   lt div gt  x000D     lt ul gt  x000D       lt li gt a lt  li gt  x000D       lt li gt b lt  li gt  x000D       lt li gt c lt  li gt  x000D       lt li gt d lt  li gt  x000D       lt li gt e lt  li gt  x000D       lt li gt f lt  li gt  x000D       lt li gt g lt  li gt  x000D       lt li gt h lt  li gt  x000D       lt li gt i lt  li gt  x000D       lt li gt j lt  li gt  x000D       lt li gt k lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D       lt li gt  lt  li gt  x000D     lt  ul gt  x000D   lt  div gt  x000D   x000D   x000D    In the future  this may become achievable through using multiple   after n

User · Answer

If you know the width of spaces between elements in the row and the amount of elements in a row  this would work      Example   3 elements in a row  10px gap between elements   div last-child nth-child 3n 2      flex-grow  1   margin-left  10px

User · Answer

I was able to do it with justify-content  space-between on the container

User · Answer

As other posters have mentioned - there s no clean way to left-align the last row with flexbox  at least as per the current spec    However  for what it s worth  With the CSS Grid Layout Module this is surprisingly easy to produce   Basically the relevant code boils down to this   ul     display  grid     1      grid-template-columns  repeat auto-fill  100px      2      grid-gap  1rem     3      justify-content  space-between     4        1  Make the container element a grid container  2  Set the grid with auto columns of width 100px   Note the use of auto-fill  as apposed to auto-fit - which  for a 1-row layout  collapses empty tracks to 0 - causing the items to expand to take up the remaining space  This would result in a justified  space-between  layout when grid has only one row which in our case is not what we want   check out this demo to see the difference between them     3  Set gaps gutters for the grid rows and columns - here  since want a  space-between  layout - the gap will actually be a minimum gap because it will grow as necessary   4  Similar to flexbox    x000D   x000D  ul   x000D    display  grid  x000D    grid-template-columns  repeat auto-fill  100px   x000D    grid-gap  1rem  x000D    justify-content  space-between  x000D     x000D       boring properties    x000D    list-style  none  x000D    background  wheat  x000D    padding  2rem  x000D    width  80vw  x000D    margin  0 auto  x000D    x000D   x000D  li   x000D    height  50px  x000D    border  1px solid green  x000D    x000D   lt ul gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D     lt li gt  lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Codepen Demo  Resize to see the effect

User · Answer

Just add few fake items with same properties except for height set to 0px to the end

User · Answer

This problem was solved for me using CSS grid    This solution is applicable only if you re having fix number of columns i e  no  of elements to display in a single row  -  using grid but not specifying number of rows  as number of elements increase it wraps into columns and add rows dynamically  I have specified three columns in this example  -  you don t have to give any position to your child cells  as it will make it fix  which we don t want    x000D   x000D   grid-class  x000D    display  grid  x000D    grid-template-columns  repeat 3  1fr   x000D    column-gap  80px  x000D    x000D   x000D   x000D

User · Answer

you want to align  use align-content  flex-start  instead of justify-content  space-between    this pulls the items last row to left   and also distributes space evenly    container     display  flex    flex-flow  row wrap    align-content  flex-start      justify-content  space-between  remove this line             https   codepen io anon pen aQggBW editors 1100    danAnderson  solution is NOT DYNAMIC  PERIOD    when item width changed from  25 to 28 dan anderson fails space between images  danAnderson    https   codepen io anon pen ZwYPmB editors 1100  dynamic  https   codepen io anon pen aQggBW editors 1100  thats what ive been trying to say   dans is hacky

User · Answer

Without any extra markup  just adding   after worked for me specifying the width of the column    grid     display flex    justify-content space-between    flex-wrap wrap     grid  after    content        width  10em    Same width of  grid  element    grid  element    width 10em      With the HTML like this     lt div class grid  gt      lt div class  grid  element  gt  lt  div gt      lt div class  grid  element  gt  lt  div gt      lt div class  grid  element  gt  lt  div gt   lt  div gt

User · Answer

Here s another couple of scss mixins    These mixins assume that you are not going to use js plugins like Isotope  they don t respect html markup order  thus messing up with css nth rules    Also  you will be able to take full advantage of them especially if you re writing your responsive breakpoints in a mobile first manner  You ideally will use flexbox grid   on the smaller breakpoint and flexbox cell   on the following breakpoints  flexbox cell   will take care of resetting previously setted margins no longer used on larger breakpoints   And by the way  as long as you correctly setup your container s flex properties  you can also use only flexbox cell   on the items  if you need to   Here s the code      apply to the container  for ex   lt UL gt  element   mixin flexbox grid  columns   gutter width      display  flex    flex-direction row    flex-wrap wrap    justify-content  flex-start      gt          include flexbox cell  columns   gutter width             apply to the cell  for ex  a  lt LI gt  element   mixin flexbox cell  columns   gutter width      base width  100    columns     gutters   columns - 1     gutter offset   gutter width    gutters    columns     flex-grow  0    flex-shrink  1    flex-basis  auto     IE10 doesn t support calc   here    box-sizing border-box     so you can freely apply borders paddings to items   width  calc     base width   -    gutter offset           remove useless margins  for cascading breakponts     amp  nth-child    columns n       margin-right  0            apply margin    for  i from 0 through   gutters        if  i    0          amp  nth-child    columns n    i            margin-right   gutter width                        Usage   ul        just this      include flexbox grid 3 20px         and maybe in following breakpoints      where the container is already setted up      just change only the cells   li      include flexbox cell 4 40px       Obviously  it s up to you to eventually set container s padding margin width and cell s bottom margins and the like   Hope it helps

User · Answer

I made a SCSS mixin for it    mixin last-row-flexbox  num-columns   width-items       filled-space   width-items    num-columns     margin  calc  100  -    filled-space         num-columns  - 1        num-cols-1    num-columns - 1      amp  nth-child    num-columns n 1  nth-last-child -n    num-cols-1      amp        margin-left   margin         for  i from 1 through  num-columns - 2         index   num-columns -  i       amp  nth-child    num-columns n    index   last-child        margin-right  auto                This is the codepen link  http   codepen io diana aceves pen KVGNZg  You just have to set the items width in percentage and number of columns   I hope this can help you

User · Answer

There is a way without flexbox  although you d need to meet the following conditions   1  The container has padding   2  Items are the same size and you know exactly how many you want per line   ul     padding  0 3  0 5     li     display  inline-block     padding  0 2  2  0    width  28 66       The smaller padding on the right side of the container allows for the extra padding to the right of each list item   Assuming other items in the same parent as the list object are padded with 0 5   it will be flush with them   You can also adjust the percentages to however much margin you d like or use calculate px values   Of course  you can do the same without the padding on the container by using nth-child  IE 9   to remove margin on every third box

User · Answer

If the individual child items have an explicit width  eg  32    you can solve this by adding an  after element to the parent and giving this the same explicit width

User · Answer

Even though gap is coming to Flexbox I will add a solution that works  It uses the sibling combinator to check 2 conditions  The first condition it checks is if an element is the second to last div nth-last-child 2  For 4 column layouts we need to check for postions 2  amp  3 Check if it is in the second row of 4 div nth-of-type 4n 2  or third in a row div nth-of-type 4n 3  For 3 column layouts we only need to check position 2 div nth-of-type 3n 2   We can then combine like below for 4 column layouts div nth-last-child 2    div nth-of-type 4n 2   div nth-last-child 2    div nth-of-type 4n 3   We also need to take care of one edge case  Any number that is 3n 2  amp  multiple of 4 will get the 35  margin-right div nth-last-child 2    div nth-of-type 4n 4  3 column layouts will be div nth-last-child 2    div nth-of-type 3n 2   Then we need to add a margin to the above selectors  The margin-right will need to be calculated and will depend on the flex-basis  I have added a sample with 3 and 4 columns and a media query  I have also added a small JavaScript button that adds a new div so you can check it works  It is a little bit of CSS but it works  I also wrote about this on my site if you want a little more explanation  https   designkojo com css-programming-using-css-pseudo-classes-and-combinators  x000D   x000D  var number   11       add   on  click   function         number   number   1          main   append   lt div gt     number     lt  div gt         x000D  body     margin  0    main    display  flex    flex-wrap  wrap    align-items  flex-start    align-content  flex-start     vertical      justify-content  space-between    min-width  300px    max-width  1200px    margin  20px auto    background-color  lightgrey    height  100vh    div     flex-basis  30     background-color   5F3BB3    min-height  20px    height  50px    margin-bottom  20px    display  flex    justify-content  center    align-items  center    color   9af3ff    font-size  3em      div nth-last-child 2    div nth-of-type 3n 2      background-color   f1b73e    margin-right  35       media screen and  min-width  720px       div       flex-basis  22          div nth-last-child 2        background-color  greenyellow         div nth-of-type 4n 2        background-color  deeppink            Using Plus combinator is for direct sibling      div nth-last-child 2    div nth-of-type 4n 2        background-color   f1b73e      margin-right  52          div nth-last-child 2    div nth-of-type 4n 3        background-color   f1b73e      margin-right  26             Also need to set the last to 0  to override when it become  3n 2       Any number that is 3n 2  amp  multiple of 4 will get the 35  margin-right      div nth-last-child 2    div nth-of-type 3n 2           div nth-last-child 2    div nth-of-type 4n 4        background-color   f1b73e      margin-right  0         x000D   lt  DOCTYPE html gt   lt html lang  en  gt    lt head gt     lt meta charset  UTF-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1 0  gt     lt link rel  stylesheet  href  style css  gt     lt title gt My New Project lt  title gt   lt  head gt    lt body gt    lt header gt     lt  header gt    lt button id  add  gt Add lt  button gt   lt main id  main  gt      lt div gt 1 lt  div gt     lt div gt 2 lt  div gt     lt div gt 3 lt  div gt     lt div gt 4 lt  div gt     lt div gt 5 lt  div gt     lt div gt 6 lt  div gt     lt div gt 7 lt  div gt     lt div gt 8 lt  div gt     lt div gt 9 lt  div gt     lt div gt 10 lt  div gt     lt div gt 11 lt  div gt     lt  main gt   lt script src  https   cdnjs cloudflare com ajax libs jquery 2 1 3 jquery min js  gt  lt  script gt   lt script src  action js  gt  lt  script gt   lt  body gt   lt  html gt  x000D   x000D   x000D

User · Answer

Assuming    You want 4 column grid layout with wrapping The number of items is not necessarily a multiple of 4   Set a left margin on every item except 1st  5th and 9th item and so on  If the left margin is 10px then each row will have 30px margin distributed among 4 items  The percentage width for item is calculated as follows   100    4 - horizontal-border - horizontal-padding - left-margin    4 - 1    4   This is a decent workaround for issues involving last row of flexbox    x000D   x000D   flex   x000D    display  flex  x000D    flex-direction  row  x000D    flex-wrap  wrap  x000D    margin  1em 0 3em  x000D    background-color  peachpuff  x000D    x000D   x000D   item   x000D    margin-left  10px  x000D    border  1px solid  x000D    padding  10px  x000D    width  calc 100    4 - 2px - 20px - 10px    4 - 1    4   x000D    background-color  papayawhip  x000D    x000D   x000D   item nth-child 4n   1    x000D    margin-left  0  x000D    x000D   x000D   item nth-child n   5    x000D    margin-top  10px  x000D    x000D   lt div class  flex  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D   lt  div gt  x000D   lt div class  flex  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D   lt  div gt  x000D   lt div class  flex  gt  x000D     lt div class  item  gt 1 lt  div gt  x000D     lt div class  item  gt 2 lt  div gt  x000D     lt div class  item  gt 3 lt  div gt  x000D     lt div class  item  gt 4 lt  div gt  x000D     lt div class  item  gt 5 lt  div gt  x000D     lt div class  item  gt 6 lt  div gt  x000D     lt div class  item  gt 7 lt  div gt  x000D     lt div class  item  gt 8 lt  div gt  x000D     lt div class  item  gt 9 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Seems like no one proposed the flex-grow solution on last item  The idea is to have your last flex item to take all the place it can using flex-grow  1    grid     display  flex    flex-flow  row wrap    justify-content  space-between      grid  gt    last-child     flex-grow  1      Note  This solution is not perfect  especially if you have centered elements inside your flex items as it will center on the possibly huge last flex item

User · Answer

This is pretty hacky  but it works for me  I was trying to achieve consistent spacing margins    grid     width  1024px    display  flex    flex-flow  row wrap    padding  32px    background-color   ddd        amp  after       content          flex  auto      margin-left -1           item       flex  1 0 24 25       max-width  24 25       margin-bottom  10px      text-align  center      background-color   bbb        amp  nth-child 4n 2        amp  nth-child 4n 3        amp  nth-child 4n 4          margin-left  1               amp  nth-child 4n 1  nth-last-child -n 4          amp  nth-child 4n 1  nth-last-child -n 4     item           margin-bottom  0                     http   codepen io rustydev pen f7c8920e0beb0ba9a904da7ebd9970ae

User · Answer

If you want a grid with some space between the items and the items starting without any initial space then this simple solution works    grid       display  flex      flex-flow  row wrap      margin  0 -5px     remove the inital 5px space     width  auto     grid  item       width  25       padding  0 5px     should be same as the negative margin above      If you want the initial 5px space then just remove the negative margin    Simple   https   jsfiddle net b97ewrno 2   The accepted answer  whilst good  it causes there to be no space between the elements on the second row

User · Answer

I know there are many answers here but   The simplest way to do this is with a grid instead of flex and grid template columns with repeat and auto fills  where you have to set the number of pixels that you have given to each element  100px from your snippet code    x000D   x000D   exposegrid   x000D       display  grid  x000D       grid-template-columns  repeat auto-fill  100px   x000D       justify-content  space-between  x000D    x000D    exposetab   x000D       width  100px  x000D       height  66px  x000D       background-color  rgba 255  255  255  0 2   x000D       border  1px solid rgba 0  0  0  0 4   x000D       border-radius  5px  x000D       box-shadow  1px 1px 2px rgba 0  0  0  0 2   x000D       margin-bottom  10px  x000D    x000D   lt div class  exposegrid  gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D      lt div class  exposetab  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

It is possible to use  flex-start  and to add the margins manually  It requires some math-hacking but is definitely easy to do and make it easy to use with a CSS preprocessor like LESS   See for example this LESS mixin    flexboxGridMixin  columnNumber  spacingPercent       contentPercent  100  -  spacingPercent     sideMargin   spacingPercent   columnNumber 2     display  flex    flex-direction  row    flex-wrap  wrap    justify-content  flex-start     gt          box-sizing  border-box      width   contentPercent  columnNumber      margin-left   sideMargin      margin-right   sideMargin          And then it can easily be used to display a responsive grid layout   ul     list-style  none    padding  0     spacing  10      media only screen and  max-width  499px     flexboxGridMixin 1  spacing        media only screen and  min-width  500px     flexboxGridMixin 2  spacing        media only screen and  min-width  700px     flexboxGridMixin 3  spacing        media only screen and  min-width  900px     flexboxGridMixin 4  spacing        media only screen and  min-width  1100px     flexboxGridMixin 5  spacing        li     background  pink    height  100px    margin-top  20px      Here is an example of  http   codepen io anon pen YyLqVB editors 110

[css] Flex-box: Align last row to grid

Examples related to css

Examples related to flexbox

Examples related to grid-layout