Flexbox: menu thật sự

Xem này: các hộp cạnh nhau

Các liên kết trong menu hiện nằm trên trang lần lượt, hơi giống chữ trong câu. Menu thật có các mục xếp gọn cạnh nhau, có khoảng cách. CSS có công cụ xếp hộp gọi là flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

Vậy thôi. display: flex bảo hộp: “Xếp con (ở đây là liên kết) thành hàng.” Và gap đặt khoảng cách giữa chúng. Flexbox làm được nhiều hơn:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

Xem này: menu như website thật

Hãy kết hợp mọi thứ bạn đã biết với flexbox:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

Điều mới ở cuối: :hover nghĩa là “khi di chuột lên”. Mục menu sáng lên khi hover – đúng như website bạn quen.

Lượt của bạn 💪

Biến menu thành menu thật: thanh màu full chiều rộng header, mục cạnh nhau dạng viên thuốc, sáng khi hover. Lấy màu từ bảng màu bài 6.

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

header {
  background-color: #ea580c;
  padding: 16px;
}

header {
  background-color: #15803d;
  padding: 16px;
}

header {
  background-color: #b91c1c;
  padding: 16px;
}

Điều cần nhớ từ bài này

• display: flex xếp con của hộp thành hàng, gap tạo khoảng cách giữa chúng.
• justify-content và align-items căn chỉnh, flex-wrap: wrap cho phép xuống dòng.
• :hover = “khi chuột di lên”. Một chút sáng lên làm website có cảm giác sống.

© 2026 Ing. Martin Polak / AlgoRhino · Điều khoản sử dụng nội dung