I Sử dụng flex để căn giữa một div trong div khác cả theo chiều ngang và chiều dọc
Ví dụ:
HTML code:
“`html
<div class=”container”>
<div class=”box”>
</div>
</div>
“`
CSS code:
“`css
.container {
width: 600px;
height: 400px;
border: 1px solid blue;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 100px;
border: 1px red solid;
}
“`
Chú ý: Như vậy, div sẽ được căn giữa cả theo chiều ngang và chiều dọc.
II. Các thuộc tính của flex
HTML:
“`html
<div class=”items”>
<div class=”item”>1</div>
<div class=”item”>23</div>
<div class=”item”>4</div>
</div>
“`
Các thuộc tính có thể áp dụng cho `items`:
– flex-direction
– flex-wrap
– flex-flow
– justify-content
– align-items
– align-content
Các thuộc tính có thể áp dụng cho `item`:
– order (Dùng để thay đổi thứ tự của item)
– flex-grow
– flex-shrink
– flex-basis
– flex
– align-self
📌 Bài viết này được đóng góp bởi người dùng và bản quyền thuộc về người dùng đã xây dựng bài viết. Bản quyền thuộc về tác giả gốc và chỉ dùng cho mục đích học tập và giao tiếp. Nếu có bất kỳ vi phạm nào, vui lòng liên hệ với chúng tôi để xóa nó.