Flexbox : justify-content CSS

.conteneur {
display: flex; 
justify-content:center;
}

* {
  margin:0px;
  padding:0px;
}

section {
  background-color:grey;
  margin:10px;
  display:flex;
  justify-content:space-bewteen;
  
}

div {
  height:200px;
}

.s01 div:nth-child(1) {
  background-color:#ffcccc;
  width:300px;  
}

.s01 div:nth-child(2) {
  background-color:#ccffcc;
  width:300px;
}

.s01 div:nth-child(3) {
  background-color:#999ccc;
  width:300px;
}

.s01 {
  justify-content:flex-start;
}

.s02 div:nth-child(1) {
  background-color:#999ccc;
  width:300px;
}


.s02 div:nth-child(2) {
  background-color:#ccffcc;
  width:300px;
}

.s02 div:nth-child(3) {
  background-color:#999ccc;
  width:300px; 
}

.s02 {
  justify-content:flex-end;
}


.s03 div:nth-child(1) {
  background-color:#999ccc;
  width:300px;
}


.s03 div:nth-child(2) {
  background-color:#ccffcc;
  width:300px;
}

.s03 div:nth-child(3) {
  background-color:#999ccc;
  width:300px; 
}

.s03 {
  justify-content:center;
}





.s04 div:nth-child(1) {
  background-color:#999ccc;
  width:300px; 
}

.s04 div:nth-child(2) {
  background-color:#ccffcc;
  width:300px;
}

.s04 div:nth-child(3) {
  background-color:#999ccc;
  width:300px; 
}

.s04 {
  justify-content:space-between;
}




.s05 div:nth-child(1) {
  background-color:#999ccc;
  width:300px; 
}

.s05 div:nth-child(2) {
  background-color:#ccffcc;
  width:300px;
}

.s05 div:nth-child(3) {
  background-color:#999ccc;
  width:300px; 
}

.s05 {
  justify-content:space-around;
}

Raccourcit en code :

* {
  margin:0px;
  padding:0px;
}

section {
  background-color:grey;
  margin:10px;
  display:flex;
  justify-content:space-bewteen;
  
}

div {
  height:200px;
}

section div:nth-child(1) {
  background-color:#ffcccc;
  width:400px;  
}

section div:nth-child(2) {
  background-color:#ccffcc;
  width:300px;
}

section div:nth-child(3) {
  background-color:#999ccc;
  width:300px;
}

.s01 {
  justify-content:flex-start;
}


.s02 {
  justify-content:flex-end;
}


.s03 {
  justify-content:center;
}


.s04 {
  justify-content:space-between;
}


.s05 {
  justify-content:space-around;
}

Section sans point est une balise qui est général et va agir à toute les sections du 1er enfant, par exemple.

La « classe », dans cette exercice ne concernera que le changement de la flexbox (ex: .s01).