Chương 4 : Bootstrap 5

117.7 Bootstrap5 Flex _ flex-fill - Hướng Dẫn Sử Dụng flex-fill Trong Bootstrap 5

Trong video này, chúng ta sẽ cùng tìm hiểu về thuộc tính flex-fill trong CSS Flexbox, một thuộc tính quan trọng giúp các phần tử con mở rộng để chiếm hết không gian trống có sẵn trong flex container. Flex-fill kết hợp cả ba thuộc tính flex-grow, flex-shrink, và flex-basis để cho phép phần tử vừa giãn nở vừa thu nhỏ và cân đối kích thước dựa trên không gian container. Khi sử dụng flex-fill, các phần tử sẽ được chia tỷ lệ giãn đều với nhau, giúp bố cục trở nên cân đối và hợp lý hơn. Giá trị flex: 1 1 auto giúp các phần tử mở rộng theo trọng số đã đặt, đồng thời điều chỉnh kích thước theo không gian có sẵn và tự động thích nghi với các thay đổi về kích thước của container. Trong ví dụ minh họa, các phần tử được sử dụng với flex-fill giúp chúng mở rộng ra và chiếm toàn bộ không gian một cách đồng đều. Điều này đặc biệt hữu ích khi bạn muốn các phần tử có kích thước tương tự nhau, dù nội dung bên trong có thể khác nhau về độ dài hoặc số lượng ký tự. Tính năng này giúp các phần tử giữ bố cục linh hoạt, dễ dàng điều chỉnh và tạo ra các thiết kế nhất quán. Video này sẽ giúp bạn hiểu rõ hơn về cách flex-fill hoạt động và cách nó tương tác với các thuộc tính khác như flex-grow, flex-shrink, và flex-basis. Sau khi học xong, bạn sẽ tự tin áp dụng flex-fill vào các dự án của mình để tạo ra bố cục linh hoạt và chuyên nghiệp hơn.