Căn ngang flex items với justify-content khi không gian thừa

Thuộc tính justify-content căn chỉnh flex items trên trục chính (main axis) khi tổng kích thước items nhỏ hơn container. Đây là cách tiêu chuẩn để căn giữa, space-between, space-around...

Ví dụ: justify-content: center

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #3498db;
      justify-content: center;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

Các giá trị justify-content

Giá trị	Hiệu ứng	Use case
`flex-start`	Dồn đầu (mặc định)	Menu trái, text align left
`center`	Căn giữa	Hero section, modal, pagination
`flex-end`	Dồn cuối	Action buttons right
`space-between`	2 đầu chạm mép, giữa cách đều	Header: logo left, nav right
`space-around`	Khoảng cách quanh item	Gallery, card grid
`space-evenly`	Khoảng cách hoàn toàn đều	Tab bar, tool group

Khi flex-direction: column

.vertical-center {
  display: flex;
  flex-direction: column;
  height: 100vh;
  justify-content: center; /* Căn giữa DỌC */
}

Kết hợp gap (Modern CSS)

.nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem; /* Khoảng cách giữa items */
  align-items: center;
}

Lưu ý

Chỉ tác dụng khi có không gian thừa trên main axis
Nếu items lớn hơn container: không có hiệu ứng (trừ khi wrap)
Khác với align-items (cross axis) và align-content (multi-line)