How do I automatically add spacing between divs without using percentage?

Question

I have a few divs aligned horizontally. How do I make the spacing between them automatic so that if I resize the screen or add another div, there will be equal spacing between divs.

Example when screen width is 600px:

Example when screen width is 330px:

Hopefully my explanation is good enough.

Thanks for any help!

Answer 1

Flexbox can do that https://jsfiddle.net/2Lzo9vfc/210/

HTML

<div class="content">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

CSS

.content {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around; 
    justify-content: space-around;
    width: 100%;
}

.box {
    background: black;
    padding: 25px;
    color: white;
}

Answer 2

Here you can find a solution with flexbox:

.container {
    display:flex;
    justify-content:space-between;
}
.item {
    background:#000;
    height:50px;
    width:120px;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

More information about using flexbox you can find here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/