Code Thuộc tính justify-content trong CSS

Code Thuộc tính justify-content trong CSS

Code Thuộc tính justify-content trong CSS

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính justify-content trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; height:auto; float:left; border:1px solid red; margin-bottom: 10px; padding:10px; display: flex;}

span{width:50px; height:50px; float:left; margin:0px; background:green; color:#fff; border:1px solid blue;line-height:50px; text-align:center}

h4{margin-bottom:3px}
</style>
</head>
<body>

<h1>Code Thuộc tính justify-content trong CSS</h1>

<p>Dùng để canh các phần tử con trong phần tử cha, có thể canh đều, canh trái, canh phải cho các phần tử con, thuộc tính này kết hợp với giá trị flex trong thuộc tính display:</p>

<h4>justify-content: flex-start; Canh các phần tủ con về bên trái</h4>
<div style="justify-content: flex-start;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

<h4>justify-content: center; Canh các phần tử con ra giữa</h4>
<div style="justify-content: center;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

<h4>justify-content: flex-end; Canh các phần tử về cuối cùng</h4>
<div style="justify-content: flex-end;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

<h4>justify-content: space-between; Canh các phần tử con ra 2 bên góc và giữa, khoảng cách giữa các phần tử bằng nhau</h4>
<div style="justify-content: space-between;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

<h4>justify-content: space-around; Khoảng trống xung quanh mỗi phần tử bằng nhau, khoảng trống ở đầu và cuối sẽ bằng nữa khoảng trống ở giữa, khoảng cách ở giữa của mỗi phần tử bằng nhau</h4>
<div style="justify-content: space-around;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

<h4>justify-content: space-evenly; Canh đều khoảng cách giữa các phần tử và cả cạnh 2 bên của phần tử cha, khoảng trống 2 bên và ở giữa đều bằng nhau</h4>
<div style="justify-content: space-evenly;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>

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