7.1 Thuộc tính justify-content
Flexbox cung cấp công cụ tuyệt vời để quản lý việc căn chỉnh và phân phối không gian giữa các phần tử bên trong Flex-container. Một trong những thuộc tính chính cho việc này là justify-content, giúp quản lý căn chỉnh các Flex-element dọc theo trục chính.
Thuộc tính justify-content xác định cách các Flex-element sẽ được phân phối dọc theo trục chính của Flex-container. Trục chính phụ thuộc vào giá trị của thuộc tính flex-direction:
- Nếu
flex-directioncó giá trịrowhoặcrow-reverse, trục chính sẽ là ngang - Nếu
flex-directioncó giá trịcolumnhoặccolumn-reverse, trục chính sẽ là dọc
Giá trị:
flex-start: các phần tử được căn chỉnh theo đầu container (giá trị mặc định)flex-end: các phần tử được căn chỉnh theo cuối containercenter: các phần tử được căn chỉnh theo trung tâm containerspace-between: các phần tử được phân phối đều với khoảng cách bằng nhau giữa chúngspace-around: các phần tử được phân phối đều với khoảng cách ở các mép và giữa chúngspace-evenly: các phần tử được phân phối đều với khoảng cách bằng nhau giữa chúng và các mép container
Ví dụ sử dụng:
.container {
display: flex;
border: 2px solid #000;
padding: 10px;
margin-bottom: 20px;
}
.item {
background-color: #3498db;
color: white;
padding: 10px;
margin: 5px;
}
.flex-start {
justify-content: flex-start;
}
<div class="container flex-start">
<div class="item">Phần tử 1</div>
<div class="item">Phần tử 2</div>
<div class="item">Phần tử 3</div>
</div>
7.2 Giá trị justify-content
1. flex-start
Với giá trị flex-start, các phần tử được căn chỉnh theo đầu container, tức là từ bên trái, nếu trục chính là ngang (row), hoặc từ phía trên nếu trục chính là dọc (column).
Ví dụ sử dụng:
.container {
display: flex;
justify-content: flex-start;
}
<div class="container">
<div class="item">Phần tử 1</div>
<div class="item">Phần tử 2</div>
<div class="item">Phần tử 3</div>
</div>
2. flex-end
Với giá trị flex-end, các phần tử được căn chỉnh theo cuối container, tức là từ bên phải, nếu trục chính là ngang (row), hoặc từ phía dưới nếu trục chính là dọc (column).
Ví dụ sử dụng:
.container {
display: flex;
justify-content: flex-end;
}
<div class="container">
<div class="item">Phần tử 1</div>
<div class="item">Phần tử 2</div>
<div class="item">Phần tử 3</div>
</div>
3. center
Với giá trị center, các phần tử được căn chỉnh theo trung tâm container. Giá trị này hữu ích cho việc tạo bố cục trung tâm.
Ví dụ sử dụng:
.container {
display: flex;
justify-content: center;
}
<div class="container">
<div class="item">Phần tử 1</div>
<div class="item">Phần tử 2</div>
<div class="item">Phần tử 3</div>
</div>
4. space-between
Với giá trị space-between, các phần tử được phân bổ đều dọc theo trục chính với khoảng cách bằng nhau giữa chúng. Phần tử đầu tiên được căn chỉnh theo đầu container và phần tử cuối cùng được căn chỉnh theo cuối container.
Ví dụ sử dụng:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div class="item">Phần tử 1</div>
<div class="item">Phần tử 2</div>
<div class="item">Phần tử 3</div>
</div>
5. space-around
Với giá trị space-around, các phần tử được phân phối đều với khoảng cách ở các mép và giữa chúng. Khoảng cách giữa các phần tử sẽ lớn gấp đôi khoảng cách ở các mép container.
Ví dụ sử dụng:
.container {
display: flex;
justify-content: space-around;
}
<div class="container">
<div class="item">Phần tử 1</div>
<div class="item">Phần tử 2</div>
<div class="item">Phần tử 3</div>
</div>
6. space-evenly
Với giá trị space-evenly, các phần tử được phân phối đều với khoảng cách bằng nhau giữa chúng và các mép container. Giá trị này đảm bảo khoảng cách bằng nhau trên toàn container.
Ví dụ sử dụng:
.container {
display: flex;
justify-content: space-evenly;
}
<div class="container">
<div class="item">Phần tử 1</div>
<div class="item">Phần tử 2</div>
<div class="item">Phần tử 3</div>
</div>
7.3 Căn giữa menu
Ví dụ sử dụng trong các dự án thực — căn giữa menu điều hướng:
.nav {
display: flex;
justify-content: center;
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
padding: 10px 20px;
text-decoration: none;
}
.nav-item:hover {
background-color: #575757;
}
<nav class="nav">
<a href="#" class="nav-item">Trang chủ</a>
<a href="#" class="nav-item">Về chúng tôi</a>
<a href="#" class="nav-item">Dịch vụ</a>
<a href="#" class="nav-item">Liên hệ</a>
</nav>
Giải thích mã:
.nav: Flex-container cho menu điều hướng với việc căn giữa các phần tử.nav-item: Flex-element (liên kết) với các kiểu chính
GO TO FULL VERSION