Căn chỉnh phần tử riêng lẻ trong mô hình flex của CSS
Các thuộc tính tiếp theo chúng ta sẽ học
không được đặt cho phần tử cha của các flex-item,
mà được đặt cho chính các phần tử đó. Hãy xem xét thuộc tính
align-self, thuộc tính này căn chỉnh một
khối riêng lẻ dọc theo trục chéo.
Giả sử chúng ta có các khối flex được xếp
thành một hàng. Hãy căn giữa chúng theo chiều dọc,
bằng cách đặt align-items với giá trị center,
và cung cấp cho phần tử thứ hai một lớp bổ sung
elem và đặt căn chỉnh khác cho nó,
ví dụ: đẩy nó lên cạnh trên.
Để làm điều này, chúng ta đặt thuộc tính align-self
với giá trị flex-start cho phần tử có lớp elem:
<div class="parent">
<div class="child">1</div>
<div class="child elem">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
.elem {
align-self: flex-start;
}
:
