Chương 4 : Bootstrap 5

117.11 Bootstrap5 Flex _ align-content-_ - Cách Để Quản Lý Căn Chỉnh Nội Dung Flexbox Bootstrap

Trong video này, chúng ta sẽ tìm hiểu về thuộc tính `align-content` trong Flexbox và các lớp tương ứng trong Bootstrap giúp căn chỉnh nội dung bên trong một flex container. `Align-content` là một thuộc tính quan trọng dùng để điều chỉnh khoảng cách giữa các hàng trong một flex container có nhiều dòng, giúp tạo ra các bố cục linh hoạt và thẩm mỹ hơn. Các lớp Bootstrap hỗ trợ thuộc tính `align-content` bao gồm: - `.align-content-start`: Căn chỉnh nội dung lên phía trên container (`flex-start`). Các hàng sẽ được đẩy lên đầu, tạo khoảng trống phía dưới nếu còn dư không gian. - `.align-content-end`: Căn chỉnh nội dung xuống phía dưới container (`flex-end`). Các hàng sẽ được đẩy xuống cuối, tạo khoảng trống phía trên nếu không gian dư. - `.align-content-center`: Căn chỉnh nội dung vào giữa container (`center`). Các hàng được dồn về trung tâm, tạo khoảng trống đều cả hai bên. - `.align-content-between`: Căn chỉnh nội dung với khoảng cách đều giữa các hàng (`space-between`). Khoảng trống được phân bổ đều giữa các hàng, đầu và cuối không có khoảng trống. - `.align-content-around`: Căn chỉnh nội dung với khoảng cách xung quanh các hàng (`space-around`). Khoảng trống được phân bổ đều với một lượng nhỏ hơn ở đầu và cuối. - `.align-content-stretch`: Mặc định các hàng sẽ kéo dãn để chiếm hết không gian có sẵn (`stretch`). Các phần tử trong flex container được mở rộng ra để lấp đầy toàn bộ không gian. Trong các ví dụ minh họa, bạn sẽ thấy rõ cách các lớp `align-content` thay đổi cách hiển thị nội dung bên trong flex container, tạo ra bố cục đa dạng và phù hợp với từng nhu cầu thiết kế khác nhau. Thuộc tính này đặc biệt hữu ích khi làm việc với các container có chiều cao cố định và muốn điều chỉnh sự phân bổ nội dung bên trong. Bài giảng này sẽ giúp bạn hiểu sâu hơn về cách sử dụng `align-content` trong Flexbox và các lớp hỗ trợ của Bootstrap, giúp tối ưu hóa bố cục và tạo ra các giao diện đẹp mắt, hài hòa. Hy vọng sau video này, bạn sẽ nắm vững kỹ thuật căn chỉnh nội dung với `align-content` để áp dụng vào các dự án thiết kế web của mình.