align-items
Bài học 8 trên 15 trong khóa học CSS Flexbox: khóa học đầy đủ của Coddy.
Thuộc tính align-items xác định cách căn chỉnh dọc theo trục chéo.
Trục chéo nằm ngang khi hướng là cột và nằm dọc khi hướng là hàng.
Thuộc tính này nhận năm giá trị:
flex-start- căn các phần tử về đầu trục chéo.flex-end- căn các phần tử về cuối trục chéo.center- căn các phần tử vào giữa trục chéo.stretch- kéo giãn các phần tử để lấp đầy vùng chứa theo trục chéo.baseline- căn các phần tử sao cho các đường cơ sở của chúng thẳng hàng.
Giá trị mặc định của vùng chứa flex là stretch.
Ví dụ:
.container {
display: flex;
align-items: center;
}
Thử thách
DễĐặt căn chỉnh theo trục phụ của flexbox đã cho thành center.
Bạn nên thử tất cả các giá trị!
Tự làm thử
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>Tất cả bài học trong CSS Flexbox: khóa học đầy đủ
2Vùng chứa Flex
Flexboxflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentgapCăn giữa hoàn hảoTự luyện tập: Playground Web