
.container {
  margin: 20px; flex-wrap: wrap;
}
.container:nth-of-type(1) {
  justify-content: center;
}
.container:nth-of-type(2) {
  justify-content: space-between;
}
.container:nth-of-type(3) {
  justify-content: space-around;
}
.container:nth-of-type(4) {
  justify-content: space-evenly;
}
article {
  width: 60%; margin: auto;
}
</style>
</head>
<body>

<article>
<div class="container">
  <div>A</div>
  <div>BBB</div>
  <div>CCCCCC</div>
  <div>DD</div>
  <div>EEEE</div>
  <div>FFFFF</div>
  <div>GGGGG