What is the difference between space-Around and space-Evenly?

Question

I’d like to know the difference between these two properties justify-content:space-around; and justify-content:space-evenly

Answer 1

The basic difference is in the distribution of spaces:

• space-around: takes all the space left on the line and distributes equally between the elements, leaving the space equal across the line;
• space-evenly: the space is distributed equally between each adjacent element, that is, one next to the other, with the exception of the first and last:

div {
  width: 400px;
  
  border: solid 1px blue;
  background-color: #000;
}

ul {
  list-style: none;
  display: flex;
  background-color: #ddd;
  padding: 5px;
 }

li {
    width: 50px;
    height: 50px;
    border: solid 2px red;
    text-align:center;
    font-size: 1.5em;
    padding: 10px 0;
}


.lista-space-around { 
  justify-content: space-around; 
}
.lista-space-around li {
  background-color: yellow; 
}

.lista-space-evenly { 
  justify-content: space-evenly; 
}

.lista-space-evenly li { 
  background-color: cyan;
}

<div class="holder">
<ul class="lista-space-evenly">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<ul class="lista-space-around">
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>
</div>

Note that in the first line all spaces between the elements are equal and in the second are already equal between two elements, and different between the first and the last