Flexbox Layout

Giới thiệu Flexbox

Flexbox là một kỹ thuật layout trong CSS3 giúp sắp xếp các phần tử linh hoạt.

Container Properties

display: flex

.container {
  display: flex;
}

flex-direction

.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

justify-content

.container {
  display: flex;
  justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}

align-items

.container {
  display: flex;
  align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
}

Item Properties

flex-grow, flex-shrink, flex-basis

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

.item-large {
  flex: 2;
}

align-self

.item {
  align-self: center; /* auto | flex-start | flex-end | center | baseline | stretch */
}

Ví dụ thực tế

Navigation bar

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="nav-links">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #333;
  color: white;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #4CAF50;
}

Bài tập thực hành

Hãy tạo layout với Flexbox!