Thuộc tính align-content thay đổi cách hoạt động của thuộc tính flex-wrap. Nó căn chỉnh các dòng linh hoạt. Nó được sử dụng để chỉ định sự căn chỉnh giữa các dòng bên trong vùng chứa linh hoạt. Thuộc tính này xác định cách mỗi dòng linh hoạt được căn chỉnh trong một flexbox. Thuộc tính này chỉ áp dụng nếu flex-wrap: wrap được áp dụng khi có nhiều dòng các mục flexbox.
Danh sách các giá trị thuộc tính align-content:
- center
- stretch
- flex-start
- flex-end
- space-around
- space-between
- start
- end
- normal
- baseline, first baseline, last baseline
- space-evenly
- safe
- unsafe
Mô tả giá trị thuộc tính kèm ví dụ:
center: Hiển thị các dòng linh hoạt ở giữa vùng chứa linh hoạt.
Cú pháp:
align-content:center;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>align-content: center;</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Output:
stretch: Dòng được kéo dài để chiếm phần không gian còn lại của vùng chứa flex. Nó là giá trị mặc định.
Cú pháp:
align-content: stretch;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: stretch;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>align-content: stretch;</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Output:
flex-start: Hiển thị các dòng ở đầu vùng chứa flex.
Cú pháp:
align-content: flex-start;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-start;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>align-content: flex-start;</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Output:
flex-end: Hiển thị các dòng flex ở cuối vùng chứa flex.
Cú pháp:
align-content: flex-end;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: flex-end;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>align-content: flex-end;</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Output:
space-around: Bằng cách sử dụng thuộc tính space-around, không gian sẽ được phân bổ đều xung quanh các dòng flex.
Cú pháp:
align-content: space-around;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-around;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>align-content: space-around;</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Output:
space-between: Hiển thị các dòng flex với khoảng cách bằng nhau giữa chúng.
Cú pháp:
align-content: space-between;
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>align-content property</title>
<style>
.main-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
background-color: green;
}
.main-container div {
background-color: #f4f4f4;
width: 100px;
margin: 10px;
text-align: center;
font-size: 50px;
}
h2 {
text-align:center;
}
.geeks {
font-size:40px;
text-align:center;
color:#009900;
font-weight:bold;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<h2>align-content: space-between;</h2>
<div class="main-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</body>
</html>
Output:
Trình duyệt được hỗ trợ: Các trình duyệt được hỗ trợ bởi CSS | align-content property được liệt kê dưới đây:
- Google Chrome 29.0 trở lên
- Edge 12.0 trở lên
- Internet Explorer 11.0 trở lên
- Firefox 28.0 trở lên
- Opera 12.1 trở lên
- Safari 9.0 trở lên