Flexbox trong CSS

Bài học này cung cấp các kiến thức cơ bản về Flexbox, một công cụ mạnh mẽ để thiết kế giao diện linh hoạt và tối ưu hóa bố cục.

1. Flexbox là gì?

Flexbox (Flexible Box Layout) là một mô hình bố cục trong CSS được thiết kế để sắp xếp và phân phối không gian giữa các phần tử trong container, ngay cả khi kích thước của chúng không xác định.

2. Thuộc tính cơ bản của Flexbox

a. Container (display: flex)

• Khai báo:

  .container {
    display: flex;
  }
  

• Tác dụng: Chuyển container thành Flex container và các phần tử con của nó trở thành Flex items.

b. Align items và Justify content

• align-items: Căn chỉnh các phần tử dọc theo trục chéo.

  • Các giá trị:
    • flex-start: Căn trên.
    • flex-end: Căn dưới.
    • center: Căn giữa.
    • stretch: Kéo giãn theo container.

  .container {
    align-items: center;
  }
  

• justify-content: Căn chỉnh các phần tử dọc theo trục chính.

  • Các giá trị:
    • flex-start: Dãn về bên trái.
    • flex-end: Dãn về bên phải.
    • center: Căn giữa.
    • space-between: Khoảng cách đều giữa các phần tử.
    • space-around: Khoảng cách có thêm không gian xung quanh.

  .container {
    justify-content: space-between;
  }
  

c. Sử dụng flex-grow, flex-shrink, flex-basis

• flex-grow: Quy định phần tử sẽ mở rộng ra bao nhiêu so với các phần tử khác.

  .item {
    flex-grow: 1;
  }
  

• flex-shrink: Quy định phần tử sẽ co lại bao nhiêu nếu không đủ không gian.

  .item {
    flex-shrink: 2;
  }
  

• flex-basis: Quy định kích thước cơ bản của phần tử trước khi áp dụng flex-grow và flex-shrink.

  .item {
    flex-basis: 100px;
  }
  

3. Thực hành

Bài tập 1: Tạo hàng sản phẩm

Sử dụng Flexbox để sắp xếp các sản phẩm thành một hàng với khoảng cách đều nhau.

<div class="container" style="display: flex; justify-content: space-around;">
  <div class="item" style="background-color: lightblue; width: 100px; height: 100px;">Sản phẩm 1</div>
  <div class="item" style="background-color: lightgreen; width: 100px; height: 100px;">Sản phẩm 2</div>
  <div class="item" style="background-color: lightcoral; width: 100px; height: 100px;">Sản phẩm 3</div>
</div>

Bài tập 2: Tạo thanh điều hướng

Thiết kế thanh điều hướng với các mục được căn giữa.

<div class="container" style="display: flex; justify-content: center; align-items: center; height: 50px; background-color: black;">
  <div class="item" style="color: white; margin: 0 10px;">Home</div>
  <div class="item" style="color: white; margin: 0 10px;">About</div>
  <div class="item" style="color: white; margin: 0 10px;">Contact</div>
</div>

Kết quả mong đợi

• Hiểu cách sử dụng các thuộc tính cơ bản của Flexbox.
• Xây dựng các layout linh hoạt và hiện đại.