Chương 4 : Bootstrap 5

117.5 Bootstrap5 Flex _ Căn Chỉnh Riêng Từng Phần Tử Với .align-self-_ Bootstrap 5

Trong video này, chúng ta sẽ tìm hiểu về thuộc tính `align-self` trong CSS Flexbox, một trong những công cụ mạnh mẽ giúp kiểm soát việc căn chỉnh của các phần tử con trong một container linh hoạt. Thuộc tính `align-self` cho phép mỗi phần tử con trong flex container tự định nghĩa vị trí căn chỉnh theo trục dọc, bất kể các phần tử khác trong cùng container đang được căn chỉnh như thế nào. Đây là một trong những kỹ thuật quan trọng giúp bạn có thể tạo ra bố cục linh hoạt và phù hợp với nhu cầu thiết kế của mình. Trong bài giảng, bạn sẽ được giới thiệu qua các giá trị của `align-self`, bao gồm: 1. **align-self-start**: Căn chỉnh phần tử về phía đầu của trục chính, làm cho nó gắn sát vào cạnh trên của flex container. Đây là giá trị hữu ích khi bạn muốn một phần tử luôn xuất hiện ở vị trí bắt đầu, bất kể các phần tử khác trong flex container. 2. **align-self-end**: Trái ngược với `align-self-start`, `align-self-end` sẽ căn chỉnh phần tử về phía cuối của trục chính, đẩy nó về cạnh dưới của container. Tính năng này cho phép phần tử linh hoạt định vị ở những vị trí khác nhau mà không cần ảnh hưởng đến các phần tử khác trong cùng container. 3. **align-self-center**: Với giá trị `center`, phần tử sẽ được căn chỉnh vào giữa trục chính của container. Đây là một giải pháp tối ưu khi bạn muốn phần tử nổi bật và luôn xuất hiện ở giữa không gian còn lại của flex container. 4. **align-self-baseline**: Thuộc tính này giúp phần tử căn chỉnh dựa trên baseline của container, làm cho các phần tử bên trong xuất hiện theo đường cơ sở của chúng. Nó rất hữu ích trong việc quản lý các phần tử văn bản hoặc các nội dung có kích thước không đồng đều. 5. **align-self-stretch**: Đây là giá trị mặc định giúp phần tử kéo dãn và chiếm toàn bộ chiều cao của flex container. `align-self-stretch` mang lại hiệu quả tối đa khi cần làm đầy không gian trống của container mà không cần tác động lên các phần tử con khác. Trong các ví dụ minh họa, mỗi loại `align-self` được thể hiện rõ ràng với các phần tử được đặt trong những container có viền để người xem dễ dàng nhận biết sự khác biệt. Mỗi ví dụ sẽ giúp bạn hiểu rõ hơn về cách các giá trị khác nhau của `align-self` hoạt động, giúp bạn nắm vững kỹ thuật sắp xếp các phần tử linh hoạt theo ý muốn. Video này không chỉ giới thiệu về các giá trị của `align-self` mà còn giúp bạn hiểu cách áp dụng chúng vào thực tế, tăng tính sáng tạo trong thiết kế giao diện. Sau khi xem xong, bạn sẽ tự tin hơn trong việc sử dụng Flexbox để điều chỉnh các phần tử con sao cho phù hợp với bố cục tổng thể, tạo ra những trải nghiệm người dùng mượt mà và thẩm mỹ hơn. Hy vọng video này sẽ giúp bạn nắm vững và ứng dụng hiệu quả thuộc tính `align-self` trong các dự án thiết kế web của mình.