Creating Spacers with Flexbox

Discussion

1. Iain Simmons

   Isn’t that what justify-content: space-between is for? So you don’t need spacer divs? Otherwise, I think you can set a right margin on the left buttons div or left margin on the right buttons to the value of auto and achieve the same thing…
2. Cristian Radu

   For this simple case you don’t even need the spacer element. Just add justify-content: space-between; on the parent.
3. RonnieSan

   You can also use justify-content: space-between so you don’t have to use a spacer element.
4. Dan f

   Personally I’d reach for margin left or right Auto on either the first or second element. But I agree that flexbox is super cool!
5. David

   Hi David (great name! ;)), with flexbox, you don’t need a spacer, just add margin-left: auto to the right button and its going to fill in the blank space, here is the spec – https://www.w3.org/TR/css-flexbox-1/#auto-margins
6. Aleks Hudochenkov

   No need for a spacer.

   Solution 1.

   justify-content: space-between;

   https://codepen.io/hudochenkov/pen/Vxwjbv

   Solution 2.

   margin-left: auto;

   on the last item:

   https://codepen.io/hudochenkov/pen/YLzWrq
7. David Oliver

   Hi David. You don’t need the spacer element to achieve this justification as there’s justify-content: space-between;, applied to the flex container. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ is very helpful.
8. Alamowo

   What about the justify-content property? There is no need for the empty .spacer if you set it to space-between.
9. Ralph

   Uhm… but why the need for an empty spacer div in this situation while there is ‘justify-content: space-between’?

   .parent {
       display: flex;
       justify-content: space-between;
   }
   
10. Ahmed

    Empty divs are bad.

    This can be accomplished with justify-content: space-between on the parent: https://codepen.io/anon/pen/gzOGQp

    Don’t rush posts on something you just started with ;)
• Brian

  With all do respect, I’m glad David “rushed” this post. I quickly learned a little something about flexboxes as well as the justify-content attribute. Thank you both!
11. Šime Vidas

    An alternative approach would be to apply margin-left: auto to the .right-buttons element *instead* of using a spacer element:

    https://codepen.io/simevidas/pen/KRKXGm?editors=1100
12. Pawel Grzybek

    Hi David.

    There is no need to create a divs at all. Solution no 1:

    .parent {
      display: flex;
      border: 1px solid red;
      height: 100px;
      justify-content: space-between;
    }
    
    .left-buttons {
      width: 50px;
      background: pink;
    }
    
    .right-buttons {
      width: 50px;
      background: lightblue;
    }
    

    … and solution no 2:

    .parent {
      display: flex;
      border: 1px solid red;
      height: 100px;
    }
    
    .left-buttons {
      width: 50px;
      background: pink;
      margin-right: auto;
    }
    
    .right-buttons {
      width: 50px;
      background: lightblue;
    }
    
13. raphael

    You can make spacer with pseudo-elements too, without any extra div

    .parent {
      display: flex;
    }
    .parent::before {
      flex-grow: 1;
    }
    .start-buttons {
      order: -1;
    }
    
14. raphael

    (forgot the content: "" in my last comment )