TVD Media
CSS Flex hay còn có tên gọi đầy đủ là CSS flexbox ra đời để khắc phục tình trạng khi dàn trang phải ngồi căn chỉnh từng thành phần một. Trong bài viết này TDV Media sẽ cung cấp cho bạn những thông tin cơ bản dễ hiểu nhất về flex CSS.
Tổng quan về flex CSS
Flex CSS là gì?
Flex CSS là một phương pháp dàn trang linh hoạt, giúp các thành phần tự điều chỉnh kích thước để hiển thị tốt trên mọi thiết bị. Nhờ đó, bạn không cần phải căn chỉnh thủ công kích thước của từng phần tử hay sử dụng float; chỉ cần thiết lập các phần tử theo chiều ngang hoặc dọc, và chúng sẽ tự động hiển thị đúng như mong muốn.
Flex CSS hoạt động dựa trên nguyên lý của một chiếc hộp chứa nhiều thành phần nhỏ bên trong, giúp việc căn chỉnh trở nên dễ dàng hơn. Hiện nay, Flex CSS thường được sử dụng cho các bố cục nhỏ, trong khi các bố cục lớn hơn vẫn thường áp dụng phương pháp dàn trang truyền thống.
Tổng quan về flex CSS
Ưu điểm sử dụng của flex CSS
- Flex CSS cho phép một khung chứa nhiều thành phần, giúp dễ dàng quản lý và hiển thị các phần tử.
- Người dùng có thể dễ dàng căn chỉnh các thành phần theo trục chính, trục phụ và thậm chí điều chỉnh từng phần tử riêng lẻ.
- Flex CSS hỗ trợ việc dàn các phần tử trên nhiều dòng, nghĩa là nếu không đủ không gian trên một dòng, các phần tử sẽ tự động chuyển sang dòng tiếp theo.
- Với Flex CSS, bạn có thể thay đổi thứ tự các phần tử mà không cần thay đổi mã HTML gốc, giúp việc điều chỉnh bố cục trở nên đơn giản hơn.
- Hỗ trợ điều chỉnh kích thước của các đối tượng, cho phép bạn tùy biến hiển thị các thành phần một cách linh hoạt.
Cấu trúc của flex box CSS
- Trong Flex CSS, có hai thành phần chính quan trọng: container và item.
Container: Đây là phần tử lớn bao quanh tất cả các phần tử con. Container sẽ thiết lập cách sắp xếp các phần tử theo chiều dọc hoặc chiều ngang, và các phần tử con bên trong sẽ hiển thị theo thiết lập đó. - Item: Đây là các phần tử con bên trong container. Bạn có thể thiết lập số cột cũng như thứ tự hiển thị của các item
Ngoài ra, còn có các khái niệm khác quan trọng trong Flex CSS:
- Main start và Main end: Đây là điểm bắt đầu và kết thúc của container theo trục chính (main axis). Main start là điểm bắt đầu, và main end là điểm kết thúc.
- Cross start và Cross end: Tương tự, đây là điểm bắt đầu và kết thúc của container theo trục phụ (cross axis). Cross start là điểm bắt đầu, và cross end là điểm kết thúc.
- Main axis: Đây là trục chính mà các item sẽ hiển thị, mặc định chạy từ trái sang phải.
- Cross axis: Đây là trục vuông góc với main axis, chạy từ trên xuống dưới.
- Main size: Đây là kích thước của item theo trục chính (main axis).
- Cross size: Đây là kích thước của item theo trục phụ (cross axis).
Trình duyệt hỗ trợ flex CSS
Các thuộc tính của Flex CSS hiện tại được hầu hết các trình duyệt hiện đại hỗ trợ, bao gồm: Chrome, Firefox, Internet Explorer, Opera, và Safari.
Các thuộc tính của Flex Container
display
Để sử dụng Flexbox trong CSS, bạn chỉ cần khai báo thuộc tính display: flex cho phần tử container. Ví dụ:
.container {
display: flex; /* hoặc inline-flex */
}
Lưu ý: Các thuộc tính dàn cột thông thường của CSS sẽ không hoạt động trong flex container.
Ví dụ minh họa:
Trong ví dụ này, .container được thiết lập với display: flex, và các phần tử con .item sẽ được dàn đều trong không gian của container.
flex-direction
Thuộc tính flex-direction xác định hướng của trục chính (main axis) mà container sẽ sắp xếp các item.
Cú pháp:
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Các tham số:
row: Mặc định, các flex item được sắp xếp theo chiều ngang, từ trái qua phải (main axis nằm ngang).
row-reverse: Các flex item được sắp xếp theo chiều ngang, từ phải qua trái (main axis nằm ngang).
column: Các flex item được sắp xếp theo chiều dọc, từ trên xuống dưới (main axis nằm dọc).
column-reverse: Các flex item được sắp xếp theo chiều dọc, từ dưới lên trên (main axis nằm dọc).
Ví dụ minh họa:
Trong ví dụ này, .container được thiết lập với các giá trị khác nhau của flex-direction để minh họa cách các item được sắp xếp theo các hướng khác nhau.
flex-wrap
Theo mặc định, các item sẽ tự động thay đổi kích thước để hiển thị trên cùng một dòng, bất kể bạn có thay đổi kích thước trình duyệt như thế nào. Điều này có thể khiến nội dung bên trong bị giãn hoặc ép nhỏ lại, làm xấu giao diện. Vì vậy, thuộc tính flex-wrap cho phép các item tự động xuống dòng khi kích thước container thay đổi.
Cú pháp:
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
Tham số:
nowrap: Mặc định, tất cả các item sẽ nằm trên một dòng.
wrap: Khi kích thước container thay đổi và tổng chiều rộng của các item lớn hơn chiều rộng của container, các item sẽ tự động xuống dòng.
wrap-reverse: Tương tự như wrap, nhưng thay vì xuống dòng, các item sẽ tự động nhảy lên trên.
Ví dụ:
<body>
<h2>flex-wrap: nowrap</h2>
<div class="container" style="flex-wrap: nowrap;">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<h2>flex-wrap: wrap</h2>
<div class="container" style="flex-wrap: wrap;">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
<h2>flex-wrap: wrap-reverse</h2>
<div class="container" style="flex-wrap: wrap-reverse;">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
flex-flow
Thuộc tính flex-flow được sử dụng để kết hợp hai thuộc tính flex-direction và flex-wrap thành một dòng lệnh.
Cú pháp:
flex-flow: <'flex-direction'> || <'flex-wrap'>;
Ví dụ:
<style>
.container {
display: flex;
flex-flow: row wrap; /* kết hợp flex-direction và flex-wrap */
border: 1px solid black;
}
.item {
background-color: lightblue;
padding: 20px;
margin: 5px;
border: 1px solid blue;
width: 150px;
}
</style>
<title>Flex-Flow Example</title>
</head>
<body>
<h2>flex-flow: row wrap</h2>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
</div>
</body>
justify-content
Theo mặc định, các item bên trong container sẽ bắt đầu từ main start đến main end. Tuy nhiên, nếu container còn khoảng trống, bạn có thể sử dụng thuộc tính justify-content để điều chỉnh vị trí và căn chỉnh các item bên trong container theo trục chính (main axis), tùy thuộc vào giá trị của flex-direction.
Cú pháp:
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
Các tham số:
- flex-start: Mặc định, các item sẽ bắt đầu từ lề chính main-start của container.
- flex-end: Các item sẽ bắt đầu từ lề chính main-end của container.
- center: Các item sẽ nằm giữa container.
- space-between: Các item sẽ có khoảng cách đều nhau, với item đầu tiên sát main-start và item cuối cùng sát main-end.
- space-around: Mỗi item sẽ có khoảng cách hai bên bằng nhau.
- space-evenly: Các item sẽ được phân phối sao cho khoảng cách giữa hai item bất kỳ và giữa item với lề là bằng nhau.
align-items
Thuộc tính align-items được sử dụng để căn chỉnh và điều chỉnh vị trí bắt đầu của các item bên trong container theo trục phụ (cross axis), theo chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.
Cú pháp:
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
Các tham số:
- stretch: Mặc định, các item sẽ kéo dài để lấp đầy chiều cao của container.
- flex-start: Các item sẽ được căn chỉnh bắt đầu từ điểm đầu của trục phụ (cross start) của container.
- flex-end: Các item sẽ được căn chỉnh kết thúc tại điểm cuối của trục phụ (cross end) của container.
- center: Các item sẽ được căn giữa theo trục phụ, giúp chúng nằm ở giữa container.
- baseline: Các item sẽ được căn chỉnh dựa trên đường cơ sở (baseline) của chúng.
align-content
Thuộc tính align-content được sử dụng để căn chỉnh khoảng cách giữa các item bên trong container theo trục phụ (cross axis), theo chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.
Cú pháp:
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
Giải thích các tham số:
- flex-start: Các dòng item sẽ được căn chỉnh bắt đầu từ điểm đầu của trục phụ (cross start) của container.
- flex-end: Các dòng item sẽ được căn chỉnh kết thúc tại điểm cuối của trục phụ (cross end) của container.
- center: Các dòng item sẽ được căn giữa theo trục phụ, giúp chúng nằm ở giữa container.
- space-between: Khoảng cách giữa các dòng item sẽ được căn chỉnh đều, với dòng đầu tiên sát cross start và dòng cuối cùng sát cross end.
- space-around: Các dòng item sẽ có khoảng cách bằng nhau xung quanh chúng, với khoảng cách giữa các dòng và lề của container là bằng nhau.
- stretch: Mặc định, các dòng item sẽ kéo dài để lấp đầy không gian của container theo trục phụ.
Các thuộc tính của Flex Item
order
Theo mặc định, các item sẽ hiển thị theo thứ tự xuất hiện trong HTML. Tuy nhiên, với thuộc tính order, bạn có thể thay đổi vị trí sắp xếp của các item.
.item {
order: <integer>; /* Mặc định là 0 */
}
flex-grow
Thuộc tính flex-grow cho phép các phần tử trong container giãn ra để chiếm không gian trống trong container.
Cú pháp:
.item {
flex-grow: <number>; /* Mặc định là 0 */
}
Giải thích tham số:
<number>: Một số dương thể hiện tỷ lệ giãn nở của phần tử. Giá trị mặc định là 0, có nghĩa là phần tử sẽ không giãn ra để chiếm thêm không gian trống. Các phần tử với giá trị flex-grow lớn hơn sẽ giãn ra nhiều hơn so với các phần tử có giá trị nhỏ hơn.
Cách hoạt động:
Nếu tất cả các phần tử trong container có flex-grow: 0, chúng sẽ không giãn ra và chỉ chiếm không gian theo kích thước cố định của chúng.
Nếu một phần tử có flex-grow lớn hơn 0, nó sẽ giãn ra để chiếm không gian trống còn lại trong container. Nếu có nhiều phần tử với giá trị flex-grow khác nhau, chúng sẽ giãn ra theo tỷ lệ của các giá trị này.
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
display: flex;
border: 1px solid black;
}
.item {
background-color: lightcoral;
padding: 20px;
margin: 5px;
border: 1px solid darkred;
}
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 3; }
</style>
<title>Flex-Grow Example</title>
</head>
<body>
<h2>Using the flex-grow Property</h2>
<div class="container">
<div class="item item1">Item 1 (flex-grow: 1)</div>
<div class="item item2">Item 2 (flex-grow: 2)</div>
<div class="item item3">Item 3 (flex-grow: 3)</div>
</div>
</body>
</html>
Trong ví dụ này, container chứa ba phần tử với các giá trị flex-grow khác nhau. Item 1 có flex-grow: 1, Item 2 có flex-grow: 2, và Item 3 có flex-grow: 3. Điều này có nghĩa là Item 3 sẽ giãn ra chiếm nhiều không gian trống nhất, tiếp theo là Item 2, và cuối cùng là Item 1. Tổng không gian trống trong container sẽ được chia theo tỷ lệ 1:2:3 giữa ba phần tử.
Flex-Shrink
Thuộc tính flex-shrink ngược lại với thuộc tính flex-grow. Nó điều chỉnh khả năng co lại của các phần tử khi độ rộng của container thay đổi.
Cú pháp:
.item {
flex-shrink: <number>; /* Mặc định là 1 */
}
Giải thích tham số:
<number>: Một số dương biểu thị tỷ lệ co lại của phần tử. Giá trị mặc định là 1, có nghĩa là phần tử sẽ co lại khi cần thiết để phù hợp với kích thước container. Các phần tử với giá trị flex-shrink lớn hơn sẽ co lại nhiều hơn so với các phần tử có giá trị nhỏ hơn.
Cách hoạt động:
Nếu tất cả các phần tử trong container có flex-shrink: 0, chúng sẽ không co lại khi container bị thu nhỏ, dẫn đến tình trạng tràn.
Nếu một phần tử có flex-shrink lớn hơn 0, nó sẽ co lại khi container bị thu nhỏ để đảm bảo tất cả các phần tử vẫn phù hợp trong không gian container. Nếu có nhiều phần tử với giá trị flex-shrink khác nhau, chúng sẽ co lại theo tỷ lệ của các giá trị này.
flex-basis
Thuộc tính flex-basis được sử dụng để xác định độ dài ban đầu của một item trong container.
Cú pháp:
.item {
flex-basis: <length> | auto; /* Mặc định là auto */
}
Giải thích:
<length>: Độ dài cụ thể (ví dụ: 100px, 50%) mà item sẽ có ban đầu.
auto: Mặc định, độ dài của item sẽ được xác định bởi nội dung bên trong hoặc các quy tắc CSS khác.
flex
Thuộc tính flex được sử dụng để kết hợp ba thuộc tính flex-grow, flex-shrink, và flex-basis vào một dòng duy nhất.
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ];
}
Ví dụ:
Thay vì phải khai báo ba thuộc tính riêng biệt như sau:
.item {
flex-grow: 1;
flex-shrink: 3;
flex-basis: 250px;
}
Bạn có thể viết ngắn gọn hơn bằng cách sử dụng thuộc tính flex:
.item {
flex: 1 3 250px;
}
Giá trị mặc định của flex:
flex: 0 1 auto;
Lưu ý khi sử dụng thuộc tính flex:
- Nếu chỉ có một tham số: flex: 1; thì tham số đó được hiểu là flex-grow.
- Nếu chỉ có một tham số với đơn vị độ dài: flex: 250px; thì tham số đó được hiểu là flex-basis.
- Nếu có hai tham số: flex: 1 250px; thì tham số đầu tiên là flex-grow và tham số thứ hai là flex-basis.
- Nếu có hai tham số mà không có đơn vị độ dài: flex: 1 2; thì tham số đầu tiên là flex-grow và tham số thứ hai là flex-shrink.
align-self
Thuộc tính align-self hoạt động tương tự như align-items, nhưng áp dụng riêng cho từng item trong container. Điều này cho phép bạn điều chỉnh vị trí của một số item cụ thể mà không bị ảnh hưởng bởi giá trị align-items đã đặt cho toàn bộ container.
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
Giá trị của align-self:
- auto: Sử dụng giá trị của align-items từ container.
- flex-start: Căn chỉnh item tại điểm bắt đầu của trục phụ (cross axis).
- flex-end: Căn chỉnh item tại điểm kết thúc của trục phụ (cross axis).
- center: Căn chỉnh item ở giữa trục phụ.
- baseline: Căn chỉnh item theo đường cơ sở của nó.
- stretch: Kéo dài item để lấp đầy không gian của container theo trục phụ.
Hy vọng rằng qua bài viết này, bạn đã hiểu rõ hơn về CSS Flex cùng với các thuộc tính và cách sử dụng của nó. Chúc bạn áp dụng Flex CSS một cách hiệu quả nhất để tạo ra những thiết kế web hiện đại và linh hoạt. Nếu có bất kỳ câu hỏi hay thắc mắc nào, đừng ngần ngại liên hệ với TVD Media để được hỗ trợ thêm.
