How to add space between elements so they fill their container div?

Question

I want to add space between spans so that the leftmost and rightmost spans will be close to the edges of the inner div. I\'ve tried to add the following ru

Answer 1

You can do this with Flexbox and justify-content: space-between.

.content {
  display: flex;
  justify-content: space-between;
  max-width: 400px;
  margin: 0 auto;
  background: #A0C5E8;
  padding: 10px 0;
}

span {
  width: 50px;
  height: 50px;
  background: black;
}