Align-items: center trong CSS

Question

Sử dụng


  
01
 Nội dung chính Show
 áp dụng có điều kiện
Di chuột, tập trung và các trạng thái khác
Cấu trúc cơ bản
Cách sử dụng
 
  02
  03

0 để căn chỉnh các mục dọc theo trục chéo của vùng chứa sao cho tất cả các đường cơ sở của chúng thẳng hàng

áp dụng có điều kiện

Di chuột, tập trung và các trạng thái khác

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng

0 để chỉ áp dụng tiện ích

1 khi di chuột

Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States

Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng

2 để áp dụng tiện ích

1 chỉ với kích thước màn hình trung bình trở lên

CSS3 ra mắt 2 giá trị mới cho thuộc tính

3 là

4 và

5, giúp sắp xếp, bố cục các thành phần khối (khối) một cách dễ dàng, linh hoạt hơn trước

6 và

7 và các thuộc tính đi kèm được sử dụng khá nhiều trong việc xử lý các cấu trúc, nếu như trước đây đôi lúc cần Javascript để hỗ trợ, thì giờ đây display flex sẽ giúp xử lý nhiều cấu trúc phức tạp theo một cách nào đó

Cấu trúc cơ bản

Giá trịVDMô tảflexdisplay flex. flex;Giúp các thành phần hoạt động linh hoạt. inline-flex hiển thị flex. inline-flex;Giúp các thành phần hoạt động linh hoạt dưới các định dạng

Cách sử dụng

viết HTML

1

2

3

Viết CSS - khi chưa sử dụng

8

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

Show the browser

Bây giờ ta sẽ lần áp dụng

6 và

7 để hiểu rõ hơn về cách hoạt động của các thuộc tính này

trưng bày. uốn cong

.box { 
    border: 1px solid #ccc; 
    min-height: 300px;
    display: flex;
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

Show the browser

Ta thấy

6 đã giúp các thành phần được hiển thị linh hoạt hơn

trưng bày. inline-flex

.box { 
    border: 1px solid #ccc; 
    min-height: 300px;
    display: inline-flex;
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

Show the browser

Ta thấy

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

3 đã xử lý đối với thành phần như định dạng nội tuyến

Điểm mạnh của

8 và

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

3 là khi 2 giá trị này được dùng kết hợp với các thuộc tính khác, các bạn xem chi tiết kết hợp Flex box để hiểu thêm nhé

Bên dưới đây sẽ cho các bạn thấy một số kết hợp thường được sử dụng, giá trị được viết bên trong lớp

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

6

Kết hợp 1 giá trị

Ví dụ kết quả hiển thị. uốn cong; hiển thị. flex;
hướng flex. đảo ngược hàng; hiển thị. flex;
justify-content. trung tâm; hiển thị. flex;
justify-content. flex-end; hiển thị. flex;
justify-content. không gian giữa; hiển thị. flex;
justify-content. không gian xung quanh; hiển thị. flex;
align-items. flex-end; hiển thị. flex;
align-items. trung tâm; hiển thị. flex;
align-items. đường cơ sở;

Kết hợp nhiều giá trị

Ví dụ kết quả hiển thị. flex;
hướng flex. row-reverse;
justify-content. trung tâm; hiển thị. flex;
justify-content. khoảng cách giữa;
align-items. trung tâm; hiển thị. flex;
flex-direction. row-reverse;
justify-content. flex-end; hiển thị. flex;
flex-direction. center;
align-items. trung tâm; hiển thị. flex;
hướng flex. cột; hiển thị. flex;
flex-direction. cột; hiển thị. flex;
flex-direction. cột;
justify-content. trung tâm; hiển thị. flex;
flex-direction. cột;
justify-content. không gian giữa; hiển thị. flex;
flex-direction. cột;
justify-content. không gian xung quanh; hiển thị. flex;
flex-direction. cột;
justify-content. khoảng trống;
align-items. trung tâm; hiển thị. flex;
flex-direction. đảo ngược cột;
justify-content. không gian xung quanh;
align-items. trung tâm;

Còn rất nhiều giá trị kết hợp khác, các bạn có thể sử dụng công cụ tạo box flex để tìm hiểu thêm nhé

programming css