3.1 Flexbox
Tạo bố cục linh hoạt bằng cách sử dụng Flexbox và Grid là một kỹ thuật quan trọng trong phát triển trang web đáp ứng hiện đại. Các công nghệ này cho phép dễ dàng quản lý vị trí của các phần tử trên trang, đảm bảo chúng thích ứng với các kích thước màn hình và thiết bị khác nhau.
Flexbox (Flexible Box Layout Module) được thiết kế để đặt các phần tử theo một chiều (dọc theo dòng hoặc cột). Flexbox đơn giản hóa việc tạo ra các bố cục linh hoạt và đáp ứng.
Các khái niệm chính của Flexbox:
- Flex-container: phần tử mà thuộc tính
display: flexđược áp dụng - Flex-items: các phần tử con của flex-container, nằm bên trong nó
Các thuộc tính của Flexbox
Flex-container:
display: flex: xác định phần tử như một flex-containerflex-direction: thiết lập hướng sắp xếp của các flex-items (row,column,row-reverse,column-reverse)justify-content: quản lý căn chỉnh các flex-items theo trục chính (flex-start,flex-end,center,space-between,space-around)align-items: quản lý căn chỉnh các flex-items theo trục phụ (stretch,flex-start,flex-end,center,baseline)
Flex-items:
flex-grow: xác định khả năng phần tử mở rộng khi có không gian trốngflex-shrink: xác định khả năng phần tử thu nhỏ khi thiếu không gianflex-basis: đặt kích thước ban đầu của phần tử trước khi phân phối không gian trốngalign-self: ghi đè căn chỉnh phần tử theo trục phụ, được đặt trongalign-items
Ví dụ sử dụng Flexbox
Tạo một bố cục với ba cột sẽ thích ứng với các kích thước màn hình khác nhau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về Flexbox</title>
<style>
.flex-container {
display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
}
.flex-item {
flex: 1 1 200px;
margin: 10px;
padding: 20px;
background-color: #f4f4f4;
text-align: center;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Cột 1</div>
<div class="flex-item">Cột 2</div>
<div class="flex-item">Cột 3</div>
</div>
</body>
</html>
Giải thích mã:
-
.flex-container: xác định container như một flex-container, căn chỉnh các phần tử với khoảng cách đều nhau giữa chúng và cho phép phần tử chuyển xuống dòng tiếp theo khi thiếu không gian -
.flex-item: các flex-items, chiếm không gian bằng nhau, có chiều rộng tối thiểu 200px và phân phối đều bên trong container
3.2 CSS Grid
CSS Grid Layout là một hệ thống bố cục hai chiều, cho phép tạo ra các bố cục phức tạp bằng cách sử dụng các hàng và cột.
Các khái niệm chính của CSS Grid:
- Grid-container: phần tử mà thuộc tính
display: gridđược áp dụng - Grid-items: các phần tử con của grid-container, nằm trong lưới
Các thuộc tính của CSS Grid
Grid-container:
display: grid: xác định phần tử như một grid-containergrid-template-columns: thiết lập số lượng và kích thước các cột trong lướigrid-template-rows: thiết lập số lượng và kích thước các hàng trong lướigap: quản lý khoảng cách giữa các hàng và cộtjustify-items: quản lý căn chỉnh ngang của các grid-itemsalign-items: quản lý căn chỉnh dọc của các grid-items
grid-column: xác định số cột phần tử sẽ kéo dàigrid-row: xác định số hàng phần tử sẽ kéo dàijustify-self: ghi đè căn chỉnh ngang của phần tửalign-self: ghi đè căn chỉnh dọc của phần tử
Grid-items:
Ví dụ sử dụng CSS Grid
Tạo một bố cục với ba cột và hai hàng sẽ thích ứng với các kích cỡ màn hình khác nhau.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ví dụ về CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 10px;
}
.grid-item {
padding: 20px;
background-color: #e4e4e4;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Phần tử 1</div>
<div class="grid-item">Phần tử 2</div>
<div class="grid-item">Phần tử 3</div>
<div class="grid-item">Phần tử 4</div>
<div class="grid-item">Phần tử 5</div>
<div class="grid-item">Phần tử 6</div>
</div>
</body>
</html>
Giải thích mã:
.grid-container: xác định container như một grid-container với ba cột và hai hàng, mỗi phần tử chiếm không gian bằng nhau.grid-item: các grid-items với khoảng đệm đều và nền màu
GO TO FULL VERSION