Hướng dẫn align-items trong css
Sử dụng Thiết lập phần tử chứa - kích hoạt flexĐể sử dụng tính năng Khi phần tử đã kích hoạt .containerflex { display: flex; /*Kích hoạt flexbox*/ flex-direction: row; /*Thiết lập hướng chính*/ flex-wrap: nowrap; /*Thiết lập chế độ wrap, khi các phần tử vượt qua kích thước hướng chính*/ justify-content: flex-end; /*Căn chỉnh nội dung bên trong container có flexbox*/ align-items: stretch; /*Căn chỉnh phần tử con theo hướng vuông góc hướng chính*/ align-content: stretch; /*Căn chỉnh hàng (cột) theo hướng vuông góc (chỉ hiệu lực khi nhiều hàng hoặc cột)*/ padding: 5px; background: #9C27B0; min-width: 320px; height: 480px; margin: auto; } .flexitem { padding: 20px; background: lightblue; margin: 1px; font-weight: bold; }
CSS phần tử cha (container): .containerflex { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } Thuộc tính flex-direction Khi kích hoạt
Thuộc tính flex-wrap Nó nhận các giá trị
Thuộc tính justify-content Nó nhận các giá trị để đẩy các phần tử trôi về phía nào đó của hướng chính
Thuộc tính align-items Nó nhận các giá trị để điều khiển phần tử con theo hướng Vuông góc hướng chính
Thuộc tính align-content Nó điều chỉnh vị trí các hàng (các cột) trong khung, nó nhận các giá trị như stretch, center, flex-end ... Chỉ có hiệu lực khi có nhiều hàng hoặc nhiều cột Thiết lập các phần tử conTính năng liên quan đến
Các ví dụ ở phần sau sẽ sử dụng đến CSS như sau .exam-container { display: flex; background: #ab7bb0; padding: 4px; } .exam-element { background-color: orangered; margin: 1px; color: white; min-height: 40px; justify-content:center; display: flex; align-items: center; } Thuộc tính flex-grow
Thuộc tính flex-shrink Thuộc tính Thuộc tính flex-basis Thuộc tính gán chiều dài khởi tạo cho phần tử trong hệ thống flex, ví dụ Thuộc tính flex Thuộc tính này là cách viết tổng hợp cả ba thuộc tính Ví dụ: Thuộc tính align-self Căn chỉnh một phần tử trong hệ thống flex, Cũng lưu ý có thể kết hợp với các thuộc tính margin để điều chỉnh vị trí
|