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
Tài nguyên này được người dùng tải lên và nội dung được lấy từ Internet. Trang web này chỉ giới thiệu miễn phí để học tập và chia sẻ. Nếu có bất kỳ vấn đề bản quyền hoặc vấn đề nào khác, vui lòng liên hệ với biên tập viên của trang web này để xử lý!
Lưu ý quan trọng: : Nếu phần mềm liên quan đến thanh toán, thành viên, nạp tiền, v.v., thì đây là những hành động của nhà phát triển phần mềm hoặc công ty sở hữu phần mềm đó và không liên quan gì đến trang web này. Cư dân mạng cần phải tự đưa ra phán đoán của mình.
