HTML Editor:

Hasil :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width"/>
  <title>Demo elemen HTML - flex</title>
  <style>
    body {text-align: center;font-family: 'Tahoma',sans-serif}
    .separator{
      display: block; 
      padding:4px; 
      margin: 0 auto
    }
    ul {
      margin: 10px auto;
      background:#f1f1f1;
      list-style: none; 
      padding-inline-start:0;
      display:flex;
      flex-wrap:wrap;
      gap: 5px;
    }
    ul li {
      padding:4px 12px; 
      border: 1px solid mediumblue;
      text-align: center;
      color: mediumblue; 
    }
    .caption{
      text-align: left;
      font-weight: bold; 
      font-size: 14px
    }
    .start{
      justify-content:start
    }
    .center{
      justify-content:center
    }
    .end{
      justify-content:end
    }
    .flex-end{
      justify-content:end
    }
    .between{
      justify-content:space-between
    }
    .around{
      justify-content:space-around
    }
    .evenly{
      justify-content:space-evenly
    }
  </style>
</head>
<body>
  <h2 align="center">justify-content - DEMO</h2>
  <p>Perataan pada elemen flex</p>
  <div class='container'>
    <p class='caption'>1. justify-content: start / normal / left / flex-start</p>
    <div class='separator'>
      <ul class='start'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>2. justify-content: center</p>
    <div class='separator'>
      <ul class='center'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>3. justify-content: end / right / flex-end</p>
    <div class='separator'>
      <ul class='end'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>4. justify-content: space-between</p>
    <div class='separator'>
      <ul class='between'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>5. justify-content: space-around</p>
    <div class='separator'>
      <ul class='around'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
    <p class='caption'>6. justify-content: space-evenly</p>
    <div class='separator'>
      <ul class='evenly'>
        <li>Konten 1</li>
        <li>Konten 2</li>
        <li>Konten 3</li>
      </ul>
    </div>
  </div>
</body>
</html>

AخA
    <p class='caption'>1. justify-content: start / normal / left / flex-start</p>
 
<!DOCTYPE html><html><head>  <meta charset="utf-8"/>  <meta name="viewport" content="width=device-width"/>  <title>Demo elemen HTML - flex</title>  <style>    body {text-align: center;font-family: 'Tahoma',sans-serif}    .separator{      display: block;       padding:4px;       margin: 0 auto    }    ul {      margin: 10px auto;      background:#f1f1f1;      list-style: none;       padding-inline-start:0;      display:flex;      flex-wrap:wrap;      gap: 5px;    }    ul li {      padding:4px 12px;       border: 1px solid mediumblue;      text-align: center;      color: mediumblue;     }    .caption{      text-align: left;      font-weight: bold;       font-size: 14px    }    .start{      justify-content:start    }

Coding Blogger CSS elemen flex

HTML Demo

Flex - Justify-content