Hướng dẫn cách thiết kế bố cục giao diện Web bằng FlexBox

Flexbox (viết tắt của cụm từ CSS Flexible Box Layout, tạm dịch là Bố cục Hộp Linh hoạt CSS) là một mô hình bố cục web CSS được W3C khuyến cáo nên dùng để thiết kế giao diện Web vào tháng 10 năm 2017. Bố cục Flex cho phép các phần tử đáp ứng bên trong một vùng chứa có thể tự động sắp xếp tùy theo kích thước màn hình.

Mục tiêu của Flexbox

Flexbox nhắm đến mục tiêu là cách hiệu quả để tạo bố cục, canh chỉnh và giãn cách khoảng trống giữa các phần tử bên trong vùng chứa bố cục, ngay cả khi chưa biết kích thước của các phần tử này. Vì vậy, chữ “flex” trong flexbox có ý nghĩa này.

Ý tưởng chính là của Flexbox là cho phép vùng chứa có khả năng điều chỉnh, co giãn các phần tử bên trong (theo chiều rộng, chiều cao) dựa theo khoảng trống có sẵn bên trong vùng để tránh trường hợp bị tràn vùng, bể giao diện. Bố cục Flexbox khác với bốc cụ thông thường (theo mô hình khối – block) ở chỗ cho phép tính năng thay đổi kích thước, kéo căng, co giãn,… các thành phần giao diện dễ dàng hơn.

Lưu ý bố cục Flex thích nhất nhất cho các ứng dụng có giao diện đơn giản, với các giao diện Web phức tạp thì bạn nên dùng bố cục Grid hoặc kết hợp Grid và Flexbox.

Trình duyệt hỗ trợ

Flexbox được tất cả các trình duyệt phổ biến hiện nay hỗ trợ. Chỉ có một số phiên bản trình duyệt cũ không hỗ trợ Flexbox đó là Internet Explorer từ phiên bản 6 đến 9, Opera 11-11.5, và Opera Mobile 12. Vì vậy, bạn có thể yên tâm sử dụng Flexbox để thiết kế giao diện Web.

Khái niệm cơ bản

Vùng chứa (container)

Vùng chứa (hay còn gọi là container) là vùng chứa toàn bộ giao diện Web và các thành phần bên trong. Ví dụ tạo 1 vùng chứa Flexbox như sau.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Flexbox CSS --- DAMMIO.COM</title>
    <style>
       .flex-container {
			display: flex;
			background-color: lightblue;
		}

		
    </style>
</head> 
 
<body>

<div class="flex-container">
  <!-- Nội dung bố cục con được thêm ở đây -->
</div>

</body>
 
</html>

Các phần tử Flex

Các thành phần nằm trong vùng chứa (container) gọi là các phần tử Flex (Flex items). Ví dụ tạo bố cục giao diện gồm 3 phần tử bên trong.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Flexbox CSS --- DAMMIO.COM</title>
    <style>
       .flex-container {
			display: flex;
			background-color: lightblue;
		}
		.flex-item {
			background-color: #f1f1f1;
			margin: 10px;
			width:33.33%;
			padding: 20px;
			font-size: 30px;
		}
    </style>
</head> 
 
<body>

<div class="flex-container">
  <div class="flex-item">Phần tử 1 --- dammio.com</div>
  <div class="flex-item">Phần tử 2</div>
  <div class="flex-item">Phần tử 3</div>  
</div>

</body>
 
</html>

Thuộc tính trong Flexbox

Các thuộc tính dùng cho vùng chứa (container):

flex-direction: mô tả chiều của Flexbox, theo hàng (row) hay cột (column).
flex-wrap: có nên bao phần tử con bên trong hay không (wrap, nowrap).
flex-flow: thuộc tính chung cho 2 thuộc tính flex-direction và flex-wrap.
justify-content: canh phần tử theo chiều ngang.
align-items: canh phần tử theo chiều dọc.
align-content: canh nội dung theo chiều dọc.

Liên quan: [Bootstrap] Phần 22: Các đối tượng Media

Các thuộc tính dùng cho phần tử bên trong vùng chứa (item):

order: mô tả thứ tự sắp xếp các phần tử con.
flex-grow: mô tả kích thước tương đối của phần tử con so với các phần tử khác.
flex-shrink: mô tả kích thước của phần tử được co lại.
flex-basis: mô tả kích thước (pixel) của phần tử
flex: thuộc tính dùng chung cho 3 thuộc tính flex-grow, flex-shrink, và flex-basis.
align-self: canh các phần tử theo chiều dọc.

Flex trong thiết kế bố cục Web

Như đã đề cập đầu bài, Flexbox thích hợp nhất cho các giao diện Web có bố cục không quá phức tạp do chỉ sử dụng hệ thống lưới 1 chiều chứ không phải 2 chiều (hàng, cột) như Grid. Bạn hoàn toàn có thể sử dụng Flexbox để thiết kế giao diện Web đơn giản. Mời bạn hãy xem 1 ví dụ tạo giao diện Web đơn giản sau.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title>Flexbox CSS --- DAMMIO.COM</title>
    <style>
	
		.header{
			width:100%;
			height:100px;
			background-color:yellow;
		}
		
       .flex-container {
			display: flex;
			flex-direction: row;
			background-color: lightblue;
		}
		
		.sidebar-1{
			flex:25%;
			background-color: pink;
		}
		
		.sidebar-2{
			flex:25%;
			background-color: #F7DC6F;
		}
		
		.content{
			flex:50%;
			background-color: #D7BDE2;
		}
		
		.footer{
			width:100%;
			height:50px;
			background-color: #AAA;
		}
		
		@media screen and (max-width: 768px) {
			.flex-container {   
			flex-direction: column;
		}
}
		
    </style>
</head> 
 
<body>

<div class="header">
	<h3>Header --- dammio.com</h3>
</div>

<div class="flex-container">
	<div class="sidebar-1">
		Sidebar 1</br>
		Sidebar 1</br>
		Sidebar 1</br>
		Sidebar 1</br>
		Sidebar 1</br>
		Sidebar 1</br>
		Sidebar 1</br>
	</div>
	<div class="content">
		Content</br>
		Content</br>
		Content</br>
		Content</br>
		Content</br>
	</div>  
	<div class="sidebar-2">
		Sidebar 2</br>
		Sidebar 2</br>
	</div>  
</div>
 
<div class="footer">Footer</div>  


</body>
 
</html>

Trong ví dụ trên, bạn có thể thấy Flexbox chỉ dùng để giao diện cho từng dòng chứa phần tử chứ không phải toàn bộ giao diện như Grid. Để thiết kế Web đáp ứng, bạn cũng phải kết hợp thêm @Media CSS. Bạn có thể điều chỉnh kích thước độ rộng màn hình dưới 768px để xem giao diện Web thay đổi.

Tóm lại, theo chúng tôi thì Flexbox có thể dùng cho thiết kế bố cục giao diện Web. Tuy nhiên bạn phải lưu ý Flexbox chỉ nên dùng cho bố cục đơn giản, không quá phức tạp vì nó chỉ chứa các phần tử theo một chiều hiển thị (hàng hoặc cột). Cả Flexbox và Grid đều giống nhau 1 điểm đó là khi áp dụng cho giao diện Web đáp ứng, bạn phải kết hợp thêm @Media CSS.

Trích dẫn bài viết

APA:
Dammio. (2019). Hướng dẫn cách thiết kế bố cục giao diện Web bằng FlexBox. https://www.dammio.com/2019/05/17/huong-dan-cach-thiet-ke-bo-cuc-giao-dien-web-bang-flexbox.
BibTeX:
@misc{dammio, author = {Dammio}, title = {Hướng dẫn cách thiết kế bố cục giao diện Web bằng FlexBox}, year = {2019}, url = {https://www.dammio.com/2019/05/17/huong-dan-cach-thiet-ke-bo-cuc-giao-dien-web-bang-flexbox}, urldate = {2024-07-24} }

Kết nối