Better way to set distance between flexbox items

Question

To set the minimal distance between flexbox items I m using margin  0 5px on  item and margin  0 -5px on container  For me it seems like a hack  but I can t find any better way to do this   Example    x000D   x000D   box   x000D    display  flex  x000D    width  100px  x000D    margin  0 -5px  x000D    x000D   item   x000D    background  gray  x000D    width  50px  x000D    height  50px  x000D    margin  0 5px  x000D    x000D   lt div id  box  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Moving on from sawa s answer  here s a slightly improved version that allows you to set a fixed spacing between the items without the surrounding margin   http   jsfiddle net chris00 s52wmgtq 49   Also included is the Safari  -webkit-flex  version    outer1       background-color  orange      padding  10px      outer0       background-color  green      overflow  hidden      container       display  flex      display  -webkit-flex      flex-wrap  wrap          -webkit-flex-wrap  wrap      background-color  rgba 0  0  255  0 5       margin-left  -10px      margin-top  -10px      item       flex-grow  1      -webkit-flex-grow  1      background-color  rgba 255  0  0  0 5       width  100px      padding  10px      margin-left  10px      margin-top  10px      text-align  center      color  white      lt div class  outer1  gt       lt div class  outer0  gt           lt div class  container  gt               lt div class  item  gt text lt  div gt               lt div class  item  gt text lt  div gt               lt div class  item  gt text lt  div gt               lt div class  item  gt text lt  div gt               lt div class  item  gt text lt  div gt               lt div class  item  gt text lt  div gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

box       display -ms-flex     Older IE Compatibility           display flex      justify-content space-between      The  justify-content  property makes even the gaps  no matter what s your containing div width   So  lets say your gap is 10px  you have 4 elements so you have 3 gaps  3 10px   30px    box  item       flex-basis calc  100  - 30px   4           This simple calculation just substracts all gaps added up to the container width  the  justify-content  property above mentioned takes care of the horizontal alignment          Remaining space is divided by 4  yep that s our number of elements  giving each  item its width  No other property needed  remember they re already aligned   Hope this helps   PS  If you need width in your container you set it  same if the gap size or number of elements change  fix the  flex-basis  calculation in the  item element to address all of them in one line

User · Answer

x000D   x000D   box   x000D    display  flex  x000D    width  100px  x000D    x000D   item   x000D    background  gray  x000D    width  50px  x000D    height  50px  x000D    x000D     u mean utility    x000D   u-gap-10  gt    not  last-child    x000D    margin-right  10px  x000D    x000D   lt div id  box  class  u-gap-10  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can use transparent borders   I have contemplated this issue while trying to build a flex grid model which can fallback to a tables   table-cell model for older browsers  And Borders for column gutters seemed to me the best appropriate choice  i e  Table-cells don t have margins   e g    column    border-left  5px solid transparent    border-right  5px solid transparent    border-bottom  10px solid transparent      Also note that you need min-width  50px  for flexbox  The flex model will not handle fixed sizes unless you do flex  none  on the particular child element you want as fixed and therefore excluded from being  flexi   http   jsfiddle net GLpUp 4  But all columns together with flex none  is no longer a flex model  Here is something closer to a flex model  http   jsfiddle net GLpUp 5   So you can actually use margins normally if you don t need the table-cell fallback for older browsers  http   jsfiddle net GLpUp 3   Setting background-clip  padding-box  will be necessary when using a background  as otherwise the background will flow into the transparent border area

User · Answer

Simple way of doing this is by adding margin-left and margin-right to the children div and adjust the margin value accordingly   lt div class  a  gt     lt div class  b  gt  lt  div gt     lt div class  b  gt  lt  div gt     lt div class  b  gt  lt  div gt   lt  div gt    css    a     display  flex     justify-content  center     background-color  black      b    height  25px    width  25px    background-color  grey    margin-left  5px    margin-right  5px

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  9th item and so on  and set fixed width on each item  If the left margin is 10px then each row will have 30px margin between 4 items  the percentage width of item can be 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  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

The negative margin trick on the box container works just great  Here is another example working great with order  wrapping and what not    x000D   x000D   container   x000D     border  1px solid green  x000D     width  200px  x000D     display  inline-block  x000D    x000D   x000D   box   x000D    display  flex  x000D    flex-wrap  wrap-reverse  x000D    margin  -10px  x000D    border  1px solid red  x000D    x000D   item   x000D    flex  1 1 auto  x000D    order  1  x000D    background  gray  x000D    width  50px  x000D    height  50px  x000D    margin  10px  x000D    border  1px solid blue  x000D    x000D   first   x000D    order  0  x000D    x000D   lt div class container gt  x000D   lt div id  box  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 first  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 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I often use the   operator for such cases   x000D   x000D   box   x000D    display  flex  x000D    width  100px  x000D    x000D   item   x000D    background  gray  x000D    width  50px  x000D    height  50px  x000D    x000D   item    item   x000D      margin-left  5px  x000D    x000D   lt div id  box  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have found a solution that is based on the general sibling selector     and allows infinite nesting   See this code pen for a working example  Basically  inside of column containers  every child that is preceded by another child gets a top margin  Likewise  inside every row container  every child that is preceded by another gets a left margin    x000D   x000D   box   x000D    display  flex  x000D    flex-grow  1  x000D    flex-shrink  1  x000D    x000D   x000D   box columns   x000D    flex-direction  row  x000D    x000D   x000D   box columns gt  box  box   x000D    margin-left  5px  x000D    x000D   x000D   box rows   x000D    flex-direction  column  x000D    x000D   x000D   box rows gt  box  box   x000D    margin-top  5px  x000D    x000D   lt div class  box columns  gt  x000D     lt div class  box  style  background-color  red   gt  lt  div gt  x000D     lt div class  box rows  gt  x000D       lt div class  box rows  gt  x000D         lt div class  box  style  background-color  blue   gt  lt  div gt  x000D         lt div class  box  style  background-color  orange   gt  lt  div gt  x000D         lt div class  box columns  gt  x000D           lt div class  box  style  background-color  yellow   gt  lt  div gt  x000D           lt div class  box  style  background-color  pink   gt  lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  box  style  background-color  green   gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I have used this for wrapped and fixed width columns  The key here is calc    SCSS sample   gap  10px   dl     display  flex    flex-wrap  wrap    padding   gap 2     dt  dd       margin   gap 2      dt      full width  acts as header     flex  0 0 calc 100  -    gap        dd      default grid  four columns      flex  0 0 calc 25  -    gap         half      hall width columns     flex  0 0 calc 50  -    gap          Full Codepen sample

User · Answer

You can try CSS3 s  not selector  Eg    x000D   x000D   box   x000D    display  flex  x000D    width  100px  x000D    border  1px red solid  x000D    x000D   x000D   item   x000D    background  gray  x000D    width  10px  x000D    height  100px  x000D    flex  1 1 auto  x000D    x000D   x000D   item not  last-child    x000D    margin-right  5px  x000D    x000D   lt div id  box  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s my solution  that doesn t require setting any classes on the child elements    flex-inline-row       display  inline-flex      flex-direction  row      flex-inline-row flex-spacing-4px  gt   not  last-child        margin-right  4px      Usage    lt div class  flex-inline-row flex-spacing-4px  gt     lt span gt Testing lt  span gt     lt span gt 123 lt  span gt   lt  div gt    The same technique can be used for normal flex rows and columns in addition to the inline example given above  and extended with classes for spacing other than 4px

User · Answer

You could use the new property gap  I copy paste the explanation I found in this article  as well as more information     CSS grid layout has had gap  previously grid-gap  for some time  By specifying the internal spacing of a containing element rather than the spacing around child elements  gap solves many common layout issues  For example  with gap  you don t have to worry about margins on child elements causing unwanted whitespace around the edges of a containing element    Unfortunately right now  only FireFox supports gap in flex layouts    x000D   x000D   use postcss-preset-env   x000D    stage  0  x000D    browsers  last 2 versions x000D    x000D   x000D  section   x000D    width  30vw  x000D     x000D    display  grid  x000D    gap  1rem  x000D    grid-template-columns  repeat auto-fit  minmax 12ch  1fr    x000D     x000D     amp  flex    x000D      display  flex  x000D      flex-wrap  wrap  x000D      x000D     x000D    margin-bottom  3rem  x000D    x000D   x000D   tag   x000D    color  white  x000D    background  hsl 265 100  47    x000D    padding   5rem 1rem  x000D    border-radius  1rem  x000D    x000D   x000D  button   x000D    display  inline-flex  x000D    place-items  center  x000D    gap   5rem  x000D    background  hsl 265 100  47    x000D    border  1px solid hsl 265 100  67    x000D    color  white  x000D    padding  1rem 2rem  x000D    border-radius  1rem  x000D    font-size  1 25rem  x000D    x000D   x000D  body   x000D    min-height  100vh  x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D    align-items  center  x000D    x000D   lt section gt  x000D     lt h1 gt Grid lt  h1 gt   x000D     lt div class  tag  gt Awesome lt  div gt  x000D     lt div class  tag  gt Coo lt  div gt  x000D     lt div class  tag  gt Rad lt  div gt  x000D     lt div class  tag  gt Math lt  div gt  x000D   lt  section gt  x000D   lt br gt  x000D   lt section flex gt  x000D     lt h1 gt Flex lt  h1 gt  x000D     lt div class  tag  gt Awesome lt  div gt  x000D     lt div class  tag  gt Coo lt  div gt  x000D     lt div class  tag  gt Rad lt  div gt  x000D     lt div class  tag  gt Math lt  div gt  x000D   lt  section gt  x000D   x000D   x000D

User · Answer

I set the spacing on flex items only in the direction stablished by their container  E g  if a flex container is set to flow from left to right  flex-direction row  I will only set the right margin on its children  except for the last one    flex-lr      display flex      flex-direction row      flex-lr  gt    not  last-child       margin-right 5px      This might seem to work at a first glance but wait  this shouldn t be done when justify-content is set to a value other that start or end  since all other values are already distributing the space on their own   And what if the items wrap  Then we should add space to the proper cross axis side as well  But  how to know if a container is allowing its children to wrap  And what about wrap-reverse    All this considerations made me think that this is not a trivial task and it requires a small step beyond   My approach is based on the build of a brief set of classes that acts as a wrapper of flexbox  This has some benefits    It allows to  centralize  all vendor prefixes in a single point and forget about that  It allows to group flexbox properties into a single class  or even rename some of the wording used by flexbox  that sometimes may seem not much intuitive  IMHO   If I use these classes  I will be able to write other classes based on the flex properties values that they rely on  E g  I would be able to set the spacing based on the flow direction  the cross axis alignment  wrapping  etc    I ended up building a flexbox designer to play around with all this  to help understand myself  and others  how flexbox works and to realize how wonderful flexbox is  Plese feel free to use it following the link below   http   algid com Flex-Designer  So  below you will find and abstract of the classes I use and the spacing  margin  utlity for one flow direction  You ll be able to infer the others or find them in the link provided above  Vendor prefixes have been ommited here for brevety      Flex container definition     flex-lr display flex  flex-direction row    flex-tb display flex  flex-direction column    flex-rl display flex  flex-direction row-reverse    flex-bt display flex  flex-direction column-reverse       Wrapping     wrap flex-wrap wrap    nowrap flex-wrap nowrap    wrap-rev flex-wrap wrap-reverse       Main axis alignment     align-start justify-content flex-start    align-end justify-content flex-end    align-center justify-content center    align-between justify-content space-between    align-around justify-content space-around    align-evenly justify-content space-evenly       Cross axis alignment     cross-align-start align-items flex-start    cross-align-end align-items flex-end    cross-align-center align-items center    cross-align-stretch align-items stretch    cross-align-baseline align-items baseline       Cross axis alignment when content is wrapped     wrap-align-start align-content flex-start    wrap-align-end align-content flex-end    wrap-align-center align-content center    wrap-align-stretch align-content stretch    wrap-align-between align-content space-between    wrap-align-around align-content space-around       Item alignment     item-cross-align-start align-self flex-start    item-cross-align-end align-self flex-end    item-cross-align-center align-self center    item-cross-align-stretch align-self stretch    item-cross-align-baseline align-self baseline    item-cross-align-auto align-self auto     And now the thing that brought us here  the space between the items      Flow margin  left to right      flex-lr fm-0  gt    not  last-child  margin-right 0    flex-lr fm-1  gt    not  last-child  margin-right 3px    flex-lr fm-2  gt    not  last-child  margin-right 7px    flex-lr fm-3  gt    not  last-child  margin-right 15px    flex-lr fm-4  gt    not  last-child  margin-right 32px       Cross axis     flex-lr wrap fm-0 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap fm-0 wrap-align-stretch cross-align-stretch  gt     margin-bottom 0    flex-lr wrap fm-1 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap fm-1 wrap-align-stretch cross-align-stretch  gt     margin-bottom 3px    flex-lr wrap fm-2 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap fm-2 wrap-align-stretch cross-align-stretch  gt     margin-bottom 7px    flex-lr wrap fm-3 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap fm-3 wrap-align-stretch cross-align-stretch  gt     margin-bottom 15px    flex-lr wrap fm-4 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap fm-4 wrap-align-stretch cross-align-stretch  gt     margin-bottom 32px       wrap reverse     flex-lr wrap-rev fm-0 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap-rev fm-0 wrap-align-stretch cross-align-stretch  gt     margin-top 0    flex-lr wrap-rev fm-1 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap-rev fm-1 wrap-align-stretch cross-align-stretch  gt     margin-top 3px    flex-lr wrap-rev fm-2 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap-rev fm-2 wrap-align-stretch cross-align-stretch  gt     margin-top 7px    flex-lr wrap-rev fm-3 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap-rev fm-3 wrap-align-stretch cross-align-stretch  gt     margin-top 15px    flex-lr wrap-rev fm-4 not  wrap-align-stretch  not  wrap-align-between  not  wrap-align-around   gt      flex-lr wrap-rev fm-4 wrap-align-stretch cross-align-stretch  gt     margin-top 32px     Finally  this is how the markup would look like    lt div class  flex-lr cross-align-center fm-3  gt       lt div gt          Some content here         lt  div gt       lt div gt          A bit more stuff here         lt  div gt       lt div class  flex-tb fm-3  gt           lt div gt              Now vertical content          lt  div gt           lt div gt              etc           lt  div gt       lt  div gt   lt  div gt    This is what I call code out loud

User · Answer

CSS gap property  There is a new gap CSS property for multi-column  flexbox  and grid layouts that works in some browsers now   See Can I use link 1  link 2   It is shorthand for row-gap and column-gap   x000D   x000D   box     display  flex    flex-wrap  wrap    width  200px    background-color  red    gap  10px     item     background  gray    width  50px    height  50px    border  1px black solid    x000D   lt div id  box  gt     lt div class  item  gt  lt  div gt     lt div class  item  gt  lt  div gt     lt div class  item  gt  lt  div gt     lt div class  item  gt  lt  div gt   lt  div gt  x000D   x000D   x000D   As of writing  this works in Firefox  Chrome  and Edge but not Safari  CSS row-gap property  The row-gap CSS property for both flexbox and grid layouts allows you to create a gap between rows  I think Safari doesn t support it yet   box      display  flex     row-gap  10px     CSS column-gap property  The column-gap CSS property for multi-column  flexbox and grid layouts works allows you to create a gap between columns  I think Safari doesn t support it yet   box     display  flex    column-gap  10px

User · Answer

With flexbox  creating gutters is a pain  especially when wrapping is involved   You need to use negative margins  as shown in the question     box     display  flex    width  100px    margin  0 -5px          or alter the HTML  as shown in another answer     lt div class  flex-wrapper  gt     lt div class  flex  gt       lt div class  box  gt  lt  div gt       lt div class  box  gt  lt  div gt                     lt  div gt   lt  div gt        or something else   In any case  you need an ugly hack to make it work because flexbox doesn t provide a  flex-gap  feature  at least for now    The issue of gutters  however  is simple and easy with CSS Grid Layout   The Grid spec provides properties that create space between grid items  while ignoring the space between items and the container  These properties are    grid-column-gap grid-row-gap grid-gap  the shorthand for both properties above    Recently  the spec has been updated to conform with the CSS Box Alignment Module  which provides a set of alignment properties for use across all box models  So the properties are now    column-gap row-gap gap  shorthand    However  not all Grid-supporting browsers support the newer properties  so I ll use the original versions in the demo below   Also  if spacing is needed between items and the container  padding on the container works just fine  see the third example in the demo below    From the spec      10 1  Gutters  the row-gap  column-gap  and gap   properties      The row-gap and column-gap properties  and their gap shorthand     when specified on a grid container  define the gutters between grid   rows and grid columns  Their syntax is defined in CSS Box Alignment 3     8 Gaps Between Boxes       The effect of these properties is as though the affected grid lines   acquired thickness  the grid track between two grid lines is the space   between the gutters that represent them     x000D   x000D   box   x000D    display  inline-grid  x000D    grid-auto-rows  50px  x000D    grid-template-columns  repeat 4  50px   x000D    border  1px solid black  x000D    x000D   x000D   one   x000D    grid-column-gap  5px  x000D    x000D   x000D   two   x000D    grid-column-gap  10px  x000D    grid-row-gap  10px  x000D    x000D   x000D   three   x000D    grid-gap  10px  x000D    padding  10px  x000D    x000D   x000D   item   x000D    background  lightgray  x000D    x000D   lt div class  box one  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt hr gt  x000D   x000D   lt div class  box two  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt hr gt  x000D   x000D   lt div class  box three  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    More information    Browser Support for CSS Grid Make it easier to define margins that only apply between flex-items  discussion  Spacing between flexbox items

User · Answer

Flexbox and css calc with multiple rows support  Hello  below is my working solution for all browsers supporting flexbox  No negative margins   Fiddle Demo   x000D   x000D      x000D   flexbox   x000D    display  flex  x000D    flex-direction  row  x000D    flex-wrap  wrap  x000D    justify-content  space-between  x000D    x000D   x000D   flexbox  gt  div   x000D       x000D      1 3  - 3 columns per row x000D      10px - spacing between columns  x000D       x000D    box-sizing  border-box  x000D    margin  10px 10px 0 0  x000D    outline  1px dotted red  x000D    width  calc 1 3 100  -  1 - 1 3  10px   x000D    x000D   x000D     x000D    align last row columns to the left x000D    3n - 3 columns per row x000D     x000D   flexbox  gt  div nth-child 3n    x000D    margin-right  0  x000D    x000D   x000D   flexbox  after   x000D    content      x000D    flex  auto  x000D    x000D   x000D     x000D    remove top margin from first row x000D    -n 3 - 3 columns per row  x000D     x000D   flexbox  gt  div nth-child -n 3    x000D    margin-top  0  x000D    x000D   lt div class  flexbox  gt  x000D     lt div gt col lt  div gt  x000D     lt div gt col lt  div gt  x000D     lt div gt col lt  div gt  x000D     lt div gt col lt  div gt  x000D     lt div gt col lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Take a note this code can be shorter using SASS  Update 2020 II 11 Aligned columns on the last row to the left  Update 2020 II 14 Removed margin-bottom in the last row

User · Answer

Flexbox doesn t have collapsing margins  Flexbox doesn t have anything akin to border-spacing for tables  except for CSS property gap which isn t supported in Safari  caniuse   Therefore achieving what you are asking for is a bit more difficult  In my experience  the  quot cleanest quot  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  x000D   x000D   upper     margin 30px    display flex    flex-direction row    width 300px    height 80px    border 1px red solid     padding 5px     this        upper  gt  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   x000D   lt div class  upper  gt     lt div gt aaa lt br  gt aaa lt  div gt     lt div gt aaa lt  div gt     lt div gt aaa lt br  gt aaa lt  div gt     lt div gt aaa lt br  gt aaa lt br  gt aaa lt  div gt     lt div gt aaa lt  div gt     lt div gt aaa lt  div gt   lt  div gt    lt div class  upper mc  gt     lt div gt aaa lt br  gt aaa lt  div gt     lt div gt aaa lt  div gt     lt div gt aaa lt br  gt aaa lt  div gt     lt div gt aaa lt br  gt aaa lt br  gt aaa lt  div gt     lt div gt aaa lt  div gt     lt div gt aaa lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

I used another approach  Used negative margin on the container  which needs to be the same as each child so for example 10px   Then for each child reduced the width by the total margin each side using calc    which in this case is 20px    Here is an example  https   codepen io anon pen KJLZVg   This helps when doing things responsively as you don t need to target specific nth-child to keep it flush on each side of the container when it wraps     parent       padding  0 10px     container       display  flex      margin  0 -10px      flex-wrap  wrap      width  100       max-width  500px      margin  0 auto     child       margin  0 10px 25px 10px      flex  0 0 calc 25  - 20px       height  40px      background  red      lt div class  parent  gt   lt div class  container  gt       lt div class  child  gt  lt  div gt       lt div class  child  gt  lt  div gt       lt div class  child  gt  lt  div gt       lt div class  child  gt  lt  div gt       lt div class  child  gt  lt  div gt       lt div class  child  gt  lt  div gt       lt div class  child  gt  lt  div gt   lt  div gt      Also using flex  0 0  width  it helps with IE browser

User · Answer

Use the css  display  inline-flex  value  html  lt div id  box  gt       lt div class  item  gt  lt  div gt       lt div class  item  gt  lt  div gt       lt div class  item  gt  lt  div gt       lt div class  item  gt  lt  div gt   lt  div gt   css  box       display  inline-flex      gap  10px     gap between items

User · Answer

tl dr   gutter  8px    container     display  flex    justify-content  space-between      children       flex  0 0 calc 33 3333  -  gutter

User · Answer

Eventually they will add the gap property to flexbox  Until then you could use CSS grid instead which already has the gap property  and just have a single row  Nicer than dealing with margins

User · Answer

It won t work in every case but if you have flexible child widths     and know the number of items per row you can very cleanly specify the margins of the necessary elements by using nth-child selector s   It depends largely on what you mean by  better   This way doesn t require additional wrapper markup for child elements or negative elements - but those things both have their place    x000D   x000D  section   x000D    display  block x000D    width  100vw  x000D    x000D   container   x000D    align-content  flex-start  x000D    align-items  stretch  x000D    background-color   ccc  x000D    display  flex  x000D    flex-flow  row wrap  x000D    justify-content  flex-start  x000D    width  100   x000D    x000D   x000D   child-item   x000D    background-color   c00  x000D    margin-bottom  2   x000D    min-height  5em  x000D    width  32   x000D    x000D   x000D   child-item nth-child 3n-1    x000D    margin-left  2   x000D    margin-right  2   x000D    x000D   lt html gt  x000D     lt body gt  x000D         lt div class  container  gt  x000D           lt div class  child-item  gt  lt  div gt  x000D           lt div class  child-item  gt  lt  div gt  x000D           lt div class  child-item  gt  lt  div gt  x000D           lt div class  child-item  gt  lt  div gt  x000D           lt div class  child-item  gt  lt  div gt  x000D           lt div class  child-item  gt  lt  div gt  x000D           lt div class  child-item  gt  lt  div gt  x000D         lt  div gt  x000D      lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This solution will work for all cases even if there are multiple rows or any number of elements  But the count of the section should be same you want 4 in first row and 3 is second row it won t work that way the space for the 4th content will be blank the container won t fill   We are using display  grid  and its properties    x000D   x000D   box   x000D    display  grid  x000D    width  100px  x000D    grid-gap  5px  x000D       Space between items    x000D    grid-template-columns  1fr 1fr 1fr 1fr  x000D       Decide the number of columns and size    x000D    x000D   x000D   item   x000D    background  gray  x000D    width  100   x000D       width is not necessary only added this to understand that width works as 100  to the grid template allocated space   DEFAULT WIDTH WILL BE 100       x000D    height  50px  x000D    x000D   lt div id  box  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    The Downside of this method is in Mobile  Opera Mini will not be supported and in PC this works only after IE10   Note for complete browser compatability including IE11 please use Autoprefixer    OLD ANSWER  Don t think of it as an old solution  it s still one of the best if you only want single row of elements and it will work with all the browsers   This method is used by CSS sibling combination  so you can manipulate it many other ways also  but if your combination is wrong it may cause issues also    item  item    margin-left  5px      The below code will do the trick  In this method  there is no need to give margin  0 -5px  to the  box wrapper    A working sample for you    x000D   x000D   box   x000D    display  flex  x000D    width  100px  x000D    x000D   item   x000D    background  gray  x000D    width  22px  x000D    height  50px  x000D    x000D   item  item  x000D   margin-left  5px  x000D    x000D   lt div id  box  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

According to  ChromeDevSummit there s an implementation of the gap property for Flexbox in Firefox and Chromium-based browsers  Here s a Live Demo

User · Answer

A flex container with -x  negative  margin and flex items with x  positive  margin or padding both lead to the desired visual result  Flex items have a fixed gap of 2x only between each other   It appears to be simply a matter of preference  whether to use margin or padding on the flex items    In this example  the flex items are scaled dynamically in order to preserve the fixed gap    flex-container      margin  0 -5px    display  flex    flex-flow  row wrap    justify-content  space-between      flex-item     margin  0 5px     Alternatively  padding  0 5px    flex  1 0 auto

User · Answer

Using Flexbox in my solution I ve used the justify-content property for the parent element  container  and I ve specified the margins inside the flex-basis property of the items  Check the code snippet below    x000D   x000D   container   x000D    display  flex  x000D    flex-flow  row wrap  x000D    justify-content  space-around  x000D    margin-bottom  10px  x000D    x000D   x000D   item   x000D    height  50px  x000D    display  flex  x000D    justify-content  center  x000D    align-items  center  x000D    background-color   999  x000D    x000D   x000D   item-1-4   x000D    flex-basis  calc 25  - 10px   x000D    x000D   x000D   item-1-3   x000D    flex-basis  calc 33 33333  - 10px   x000D    x000D   x000D   item-1-2   x000D    flex-basis  calc 50  - 10px   x000D    x000D   lt div class  container  gt  x000D     lt div class  item item-1-4  gt 1 lt  div gt  x000D     lt div class  item item-1-4  gt 2 lt  div gt  x000D     lt div class  item item-1-4  gt 3 lt  div gt  x000D     lt div class  item item-1-4  gt 4 lt  div gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt div class  item item-1-3  gt 1 lt  div gt  x000D     lt div class  item item-1-3  gt 2 lt  div gt  x000D     lt div class  item item-1-3  gt 3 lt  div gt  x000D   lt  div gt  x000D   lt div class  container  gt  x000D     lt div class  item item-1-2  gt 1 lt  div gt  x000D     lt div class  item item-1-2  gt 2 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There is indeed a nice  tidy  CSS-only way to do this  that one may consider  better     Of all the answers posted here  I only found one that uses calc   successfully  by Dariusz Sikorski   But when posed with   but it fails if there are only 2 items in the last row  there was no solution expanded   This solution addresses the OP s question with an alternative to negative margins and addresses the problem posed to Dariusz   notes    This example only demonstrates a 3-column layout It uses calc   to let the browser do math the way it wants -- 100  3  although 33 3333  should work just as well   and  1em 3  2  although  66em should also work well   It uses   after to pad the last row if there are fewer elements than columns    x000D   x000D   flex-container   x000D    display  flex  x000D    justify-content  space-between  x000D    flex-wrap  wrap  x000D    x000D   flex-container after   x000D    content      x000D    x000D   flex-container  gt  div  x000D   flex-container after   x000D    box-sizing  border-box  x000D    width  calc  100  3  -   1em 3  2    x000D    x000D   flex-container  gt   nth-child n   4    x000D    margin-top  1em  x000D    x000D   x000D     the following is just to visualize the items    x000D   flex-container  gt  div  x000D   flex-container after   x000D    font-size  2em  x000D    x000D   flex-container   x000D    margin-bottom 4em  x000D    x000D   flex-container  gt  div   x000D    text-align  center  x000D    background-color   aaa  x000D    padding  1em  x000D    x000D   flex-container after   x000D    border  1px dashed red  x000D    x000D   lt h2 gt Example 1  2 elements  lt  h2 gt  x000D   lt div class  flex-container  gt  x000D     lt div gt 1 lt  div gt  x000D     lt div gt 2 lt  div gt  x000D   lt  div gt  x000D   x000D   lt h2 gt Example 2  3 elements  lt  h2 gt  x000D   lt div class  flex-container  gt  x000D     lt div gt 1 lt  div gt  x000D     lt div gt 2 lt  div gt  x000D     lt div gt 3 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Also at https   codepen io anon pen rqWagE

User · Answer

Let s say if you want to set 10px space between the items  you can just set  item  margin-right 10px   for all  and reset it on the last one  item last-child  margin-right 0    You can also use general sibling   or next   sibling selector to set left margin on the items excluding the first one  item    item  margin-left 10px   or use  item not  last-child   margin-right  10px    Flexbox is so clever that it automatically recalculates and equally distributes the grid    x000D   x000D  body   x000D    margin  0  x000D    x000D   x000D   container   x000D    display  flex  x000D    x000D   x000D   item   x000D    flex  1  x000D    background  gray  x000D    height  50px  x000D    x000D   x000D   item not  last-child    x000D    margin-right  10px  x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    If you want to allow flex wrap  see the following example    x000D   x000D  body   x000D    margin  0  x000D    x000D   x000D   container   x000D    display  flex  x000D    flex-wrap  wrap  x000D    margin-left  -10px  x000D    x000D   x000D   item   x000D    flex  0 0 calc 50  - 10px   x000D    background  gray  x000D    height  50px  x000D    margin  0 0 10px 10px  x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Just use  item    item in selector to match from second  item   x000D   x000D   box   x000D    display  inline-flex  x000D    margin  0 -5px  x000D    x000D   item   x000D    background  gray  x000D    width  10px  x000D    height  50px  x000D    x000D   x000D   box  item    item   x000D    margin-left  10px  x000D    x000D   lt div id  box  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Here s a grid of card UI elements with spacing completed using flexible box     I was frustrated with manually spacing the cards by manipulating padding and margins with iffy results  So here s the combinations of CSS attributes I ve found very effective    x000D   x000D   card-container   x000D    width  100   x000D    height  900px  x000D    overflow-y  scroll  x000D    max-width  inherit  x000D    background-color   ffffff  x000D     x000D      Here s the relevant flexbox stuff   x000D    display  flex  x000D    flex-direction  row  x000D    justify-content  center  x000D    align-items  flex-start  x000D    flex-wrap  wrap   x000D    x000D   x000D    Supplementary styles for  card element   x000D   card   x000D    width  120px  x000D    height  120px  x000D    background-color   ffeb3b  x000D    border-radius  3px  x000D    margin  20px 10px 20px 10px  x000D    x000D   lt section class  card-container  gt  x000D           lt div class  card  gt  x000D   x000D           lt  div gt  x000D           lt div class  card  gt  x000D   x000D           lt  div gt  x000D           lt div class  card  gt  x000D   x000D           lt  div gt  x000D           lt div class  card  gt  x000D   x000D           lt  div gt  x000D         lt  section gt  x000D   x000D   x000D    Hope this helps folks  present and future

User · Answer

This is not a hack  The same technique is also used by bootstrap and its grid  though  instead of margin  bootstrap uses padding for its cols    row     margin 0 -15px     col-xx-xx     padding 0 15px

User · Answer

I found a hack because i really need this my self    x000D   x000D     grid    x000D   container   x000D    display  flex  x000D    flex-flow  row wrap  x000D    justify-content  space-between  x000D    x000D   x000D   container  after     this makes sure odd element goes left and not space between    x000D   item   x000D    content     x000D    width  calc 33 3333  - 20px   x000D    margin-bottom  40px  x000D    x000D   x000D     extra styling - not important    x000D   item   x000D    height  100px  x000D    background   787878  x000D    x000D   lt div class  container  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here s a post grid with nice flex grow categories also  I think you d like it  See Codepen

User · Answer

I came across the same issue earlier  then stumbled upon the answer for this  Hope it will help others for future reference   long answer short  add a border to your child flex-items  then you can specify margins between flex-items to whatever you like  In the snippet  i use black for illustration purposes  you can use  transparent  if you like    x000D   x000D   box   x000D    display  flex  x000D    width  100px  x000D       margin  0 -5px   remove this   x000D    x000D   item   x000D    background  gray  x000D    width  50px  x000D    height  50px  x000D       margin  0 5px   remove this   x000D    border  1px solid black     add this    x000D    x000D   item special  margin  0 10px    x000D   lt div id  box  gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item  gt  lt  div gt  x000D     lt div class  item special  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D    root  x000D    --inner  20px  x000D    --gap  10px     same as gutter    x000D     x000D       flex-flow in row  x000D    ---------------------   x000D    --row-wrap  row wrap  x000D    --row-nowrap  row nowrap  x000D     x000D       flex-flow in col  x000D    ---------------------   x000D    --col-wrap  column wrap  x000D      x000D     x000D     row   x000D    display  flex  x000D    flex-direction  var --flex-row   x000D    x000D     additional wrapping classes  if needed  x000D  -------------------------------------------   x000D   nowrap   x000D    display  flex  x000D    flex-flow  var --row-nowrap   x000D    x000D   wrap   x000D    display  flex  x000D    flex-flow  var --col-wrap   x000D    x000D    ----------------------------------------   x000D   class   col-     x000D    border  1px solid  ccc  x000D    margin  var --gap   x000D    padding  var --inner   x000D    height  auto  x000D    background   333  x000D    flex  1 0 auto  x000D    x000D   col-3   x000D    flex  3  x000D    x000D   lt div class  row  gt  x000D     lt div class  col-3  gt  lt  div gt  x000D     lt div class  col-3  gt  lt  div gt  x000D     lt div class  col-3  gt  lt  div gt  x000D     lt div class  col-3  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Also you can view this example

User · Answer

Well  the simplest solution regarding to your CSS  imo  is to add spacers into HTML    lt div id  box  gt     lt div class  item  gt  lt  div gt     lt div style  width  5px   gt  lt  div gt     lt div class  item  gt  lt  div gt     lt div class  item  gt  lt  div gt     lt div class  item  gt  lt  div gt   lt  div gt    so  you may control it with inline-style or class names   sometimes  it s also possible to do spacing with padding   here is the example

User · Answer

I posted my flexbox approach  here   One idea I rejected was to remove the padding from the outer columns with something like this   div nth-child    col-number n 1    padding-left  0    div nth-child    col-number n    col-number     padding-left  0      But  like other posters here  I prefer the negative margin trick  My fiddle also has responsiveness for anyone is looking for a Sass-based solution  I basically use this approach in place of a grid   https   jsfiddle net x3jvfrg1

User · Answer

I find the easiest way of doing this is with percentages and just allowing the margin to tally up your width  This means you end up with something like this if you where using your example   box      display  flex      item      flex  1 1 23      margin  0 1       Does mean your values are based on the width though which might not be good for everybody

User · Answer

Columnify - A solo class for N columns  Flexbox and SCSS   columnify     display  flex      gt          flex  1        amp  not  first-child          margin-left  2rem                Flexbox and CSS   x000D   x000D   columnify   x000D    display  flex  x000D    x000D   x000D   columnify  gt      x000D    flex  1  x000D    x000D   x000D   columnify  gt    not  first-child    x000D    margin-left  2rem  x000D    x000D   lt div class  columnify  gt  x000D     lt div style  display  inline-block  height  20px  background-color  blue   gt  lt  div gt  x000D     lt div style  display  inline-block  height  20px  background-color  blue  gt  lt  div gt  x000D     lt div style  display  inline-block  height  20px  background-color  blue  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Play with it on JSFiddle

User · Answer

Why not do it like this    item    item       margin-left  5px      This uses the adjacent sibling selector  to give all  item elements  except the first one a margin-left  Thanks to flexbox  this even results in equally wide elements  This could also be done with vertically positioned elements and margin-top  of course

User · Answer

You can use  amp   gt        as a selector to emulate a flex-gap  for a single line     x000D   x000D   box   display  flex  width  230px  outline  1px solid blue    x000D   item   background  gray  width  50px  height  100px    x000D   x000D     ----- Flexbox gap  -----    x000D   x000D   box  gt          x000D    margin-left  10px  x000D    x000D   lt div id  box  gt  x000D       lt div class  item  gt  lt  div gt  x000D       lt div class  item  gt  lt  div gt  x000D       lt div class  item  gt  lt  div gt  x000D       lt div class  item  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    If you need to support flex wrapping  you can use a wrapper element    x000D   x000D   flex   display  flex  flex-wrap  wrap     x000D   box   background  gray  height  100px  min-width  100px  flex  auto    x000D   flex-wrapper  outline  1px solid red    x000D   x000D     ----- Flex gap 10px  -----    x000D   x000D   flex  gt      x000D    margin  5px  x000D    x000D   flex   x000D    margin  -5px  x000D    x000D   flex-wrapper   x000D    width  400px     optional    x000D    overflow  hidden     optional    x000D    x000D   lt div class  flex-wrapper  gt  x000D     lt div class  flex  gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box  gt  lt  div gt  x000D       lt div class  box  gt  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

[css] Better way to set distance between flexbox items

Examples related to css

Examples related to flexbox