CSS flex-basis property sử dụng như thế nào ?

CSS flex-basis property là một trong những tính năng quan trọng của CSS Flexbox. Nó xác định kích thước ban đầu của một item trong container. Bài viết này sẽ đi sâu vào các khía cạnh của tính năng này, bao gồm cú pháp, các giá trị và cách sử dụng.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

Tổng quan CSS flex-basis property

CSS flex-basis property chỉ định kích thước ban đầu của một item trong container. Nếu item không phải là một flex-item, tính năng này sẽ không ảnh hưởng đến item tương ứng. Thông thường, tính năng này được sử dụng với các tính năng khác của CSS flex-basis property như flex-shrink và flex-grow để đảm bảo rằng tất cả các giá trị được đặt.

Các giá trị của tính năng CSS flex-basis property bao gồm:

• Auto: Đây là giá trị mặc định. Giá trị này đặt chiều rộng của item bằng giá trị của thuộc tính chiều rộng nếu được định nghĩa. Nhưng nếu thuộc tính chiều rộng không được xác định cho item Flex, nó sẽ đặt chiều rộng theo nội dung.
• width: Giá trị này được định nghĩa bằng đơn vị tương đối hoặc tuyệt đối. Nó xác định chiều dài ban đầu của item Flex. Nó không cho phép các giá trị âm.
• initial: Nó đặt tính năng về giá trị mặc định.
• inherit: Nó kế thừa tính năng từ phần tử cha của nó.

Hướng dẫn CSS flex-basis property

Để sử dụng tính năng CSS flex-basis property, chúng ta cần biết cú pháp của nó. Cú pháp của tính năng này như sau:

flex-basis: auto|width|initial|inherit;

Có thể thấy, chúng ta có thể đặt giá trị cho tính năng flex-basis bằng cách sử dụng các giá trị auto, width, initial và inherit.

Ví dụ, để đặt giá trị của tính năng CSS flex-basis property thành 150px, chúng ta có thể sử dụng cú pháp như sau:

flex-basis: 150px;

Ví dụ CSS flex-basis property

Để hiểu rõ hơn về tính năng CSS flex-basis property, chúng ta có thể xem xét một số ví dụ cụ thể:

Ví dụ 1: Sử dụng các giá trị auto, initial, inherit và width

.container {
  display: flex;
  width: 500px;
}

.item {
  border: 1px solid black;
  margin: 10px;
}

.item:first-child {
  flex-basis: auto;
}

.item:nth-child(2) {
  flex-basis: initial;
}

.item:nth-child(3) {
  flex-basis: inherit;
}

.item:last-child {
  flex-basis: 150px;
}

.item.width {
  flex-basis: 200px;
}

Trong ví dụ này, chúng ta đã đặt các giá trị của tính năng flex-basis bằng cách sử dụng các giá trị auto, initial, inherit, và 150px. Chỉ có item cuối cùng được đặt giá trị chiều rộng là 150px, trong khi các item còn lại có giá trị chiều rộng được xác định bởi nội dung của chúng.

Ví dụ 2: Sử dụng shorthand flex property

.container {
  display: flex;
  width: 500px;
}

.item {
  border: 1px solid black;
  margin: 10px;
}

.item.shorthand {
  flex: 0 1 100px;
}

Trong ví dụ này, chúng ta đã sử dụng tính năng shorthand flex để đặt giá trị cho tính năng flex-basis. Khi sử dụng shorthand flex, chúng ta chỉ cần đặt giá trị cho thuộc tính flex-grow và flex-shrink theo thứ tự, sau đó đặt giá trị cho tính năng flex-basis. Trong ví dụ này, chúng ta đã đặt giá trị cho flex-basis là 100px.

Thêm ví dụ

.flex-example {
  display: flex;
  flex-direction: row;
}

.flex-item {
  flex: 1;
  flex-basis: 100px;
}

Trong ví dụ này, chúng ta đang đặt chiều rộng cơ sở của phần tử .flex-item thành 100px. Khi không có không gian thừa, mỗi phần tử .flex-item sẽ có chiều rộng là 100px.

Lưu ý

Chiều rộng hoặc chiều cao cơ sở của phần tử chỉ được áp dụng khi không có không gian thừa. Nếu có không gian thừa, chiều rộng hoặc chiều cao của phần tử sẽ được điều chỉnh dựa trên thuộc tính flex-grow và flex-shrink.

Ưu và Nhược điểm CSS flex-basis property

Ưu điểm:

• Tính năng flex-basis giúp xác định kích thước ban đầu của item trong container Flex. Điều này rất hữu ích khi bạn muốn giữ các item cố định ở một kích thước nhất định, bất kể nội dung bên trong chúng.
• Tính năng này có thể được sử dụng để tạo ra các bố cục linh hoạt và đáp ứng.

Nhược điểm:

• Tính năng CSS flex-basis property không phù hợp cho việc sắp xếp các item theo chiều cao.
• Nếu tính năng này được sử dụng quá nhiều với các giá trị khác của Flexbox, ví dụ như flex-grow và flex-shrink, nó có thể gây ra sự khó hiểu và khó kiểm soát trong mã CSS của bạn.

Lời khuyên CSS flex-basis property

Khi sử dụng tính năng flex-basis, bạn nên cân nhắc và đánh giá xem tính năng này có phù hợp với mục đích của bạn hay không. Nếu muốn tạo ra các bố cục linh hoạt và đáp ứng, đây là một tính năng rất hữu ích cho bạn.

Tuy nhiên, khi sử dụng tính năng này, bạn nên cẩn thận để tránh việc sử dụng quá nhiều giá trị khác nhau, gây ra sự khó hiểu và khó kiểm soát trong mã CSS của bạn.

Tổng kết

Tính năng CSS flex-basis property được sử dụng để xác định kích thước ban đầu của một Flex-item trong container. Nó chỉ hoạt động trên các item được xác định là Flex-item, và có thể được sử dụng cùng với các tính năng khác của Flexbox như flex-grow và flex-shrink để đảm bảo rằng các giá trị được đặt. Bạn có thể đặt giá trị cho tính năng flex-basis bằng cách sử dụng các giá trị tương đối hoặc tuyệt đối dương. Khi sử dụng tính năng này, bạn nên cẩn thận để tránh việc sử dụng quá nhiều giá trị khác nhau, gây ra sự khó hiểu và khó kiểm soát trong mã CSS của bạn.