Code Thuộc tính align-items trong CSS

Code Thuộc tính align-items trong CSS

Code Thuộc tính align-items trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính align-items trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {border:1px solid red; display: flex;}
div div {border:1px solid blue}
</style>
</head>
<body>

<h1>Code Thuộc tính align-items trong CSS</h1>

<p>Dùng để canh chỉnh các phần tử con theo chiều dọc so với phần tử HTML cha, thuộc tính này kết hợp với giá trị flex trong thuộc tính display:</p>

<div style="align-items: center; margin-bottom:10px; height:100px">
 <div style="min-height:30px;">align-items: center;</div>
 <div style="min-height:50px;">align-items: center;</div>
 <div style="min-height:90px;">align-items: center;</div>
</div>

<div style="align-items: stretch; margin-bottom:10px; height:200px">
 <div style="min-height:30px;">align-items: stretch;</div>
 <div style="min-height:50px;">align-items: stretch;</div>
 <div style="min-height:90px;">align-items: stretch;</div>
</div>

<div style="align-items: flex-start; margin-bottom:10px; height:100px">
 <div style="min-height:30px;">align-items: flex-start;</div>
 <div style="min-height:50px;">align-items: flex-start;</div>
 <div style="min-height:90px;">align-items: flex-start;</div>
</div>

<div style="align-items: flex-end; margin-bottom:10px; height:100px">
 <div style="min-height:30px;">align-items: flex-end;</div>
 <div style="min-height:50px;">align-items: flex-end;</div>
 <div style="min-height:90px;">align-items: flex-end;</div>
</div>

<div style="align-items: baseline; margin-bottom:10px; height:100px">
 <div style="min-height:30px;">align-items: baseline;</div>
 <div style="min-height:50px;">align-items: baseline;</div>
 <div style="min-height:90px;">align-items: baseline;</div>
</div>

</body>
</html>
Code Thuộc tính align-items trong CSS nằm trong bài viết Thuộc tính align-items trong CSS