Hướng dẫn dàn trang với Flexbox trong CSS3

Ở bài viết này mình sẽ nói về một kiểu dàn trang (layout mode) được gọi là Flexbox. Với Flexbox, việc dàn layout của trang sẽ đơn giản, linh hoạt hơn chỉ với một vài dòng code. Ta cùng vào luôn vấn đề nhé!

1. Flexbox là gì?

Flexbox hay còn được gọi là Flexible Box là một kiểu dàn trang (layout mode) có khả năng tự cân đối kích thước, thứ tự của các phần từ bên trong để hiển thị phù hợp trên mọi thiết bị hay kích thước màn hình.

Theo Mozilla: Flexbox Layout phù hợp nhất cho việc thiết lập bố cục ở phạm vi nhỏ, còn thiết lập bố cục với phạm vi lớn hơn thì vẫn nên sử dụng kiểu thông thường là dàn trang theo dạng lưới (grid layout).

2. Một vài khái niệm của các thành phần trong Flexbox

Dưới đây là sơ đồ cấu trúc Flexbox

Hai thành phần quan trọng của bố cục Flexbox là:

  • flex-container: thành phần bao quanh các phần tử bên trong, bạn có thể thiết lập để điều khiển kiểu hiển thị của các item bên trong (xếp theo chiều ngang, từ trái qua phải, từ phải qua trái hoặc chiều dọc, từ trên xuống dưới, từ dưới lên trên…)
  • flex-item: các phần tử con của container, bạn có thể thiết lập được thứ tự hiển thị, số cột…

Ngoài ra:

  • main axis: là trục chính điều khiển hướng hiển thị nằm ngang hoặc nằm dọc của các item.
  • main start, main end: điểm bắt đầu của flex-container gọi là main start và điểm điểm kết thúc là main end, các flex-item sẽ hiển thị từ main start đến main end.
  • main size: kích thước (chiều rộng hoặc chiều cao) của các item sẽ tùy thuộc vào hướng của main axis.
  • cross axis: cross axis luôn là trục vuông góc của main axis. Hướng của nó phụ thuộc vào hướng của main axis.
  • cross-start | cross-end: có ý nghĩa tương tự main start, main end nhưng luôn vuông góc với main start, main end.
  • cross size: kích thước (chiều rộng hoặc chiều cao) của các item dựa trên trục cross axis (tùy thuộc vào hướng của main axis).

3. Sử dụng Flexbox

Ví dụ ta có cấu trúc HTML như sau:

<div class="container">
    <div class="item item-1">1</div>
    <div class="item item-2">2</div>
    <div class="item item-3">3</div>
</div>

Và CSS một chút cho dễ nhìn nhé

.container {
    max-width: 960px;
    max-height: 1000px;
    margin: 0 auto;
    padding: 10px;
    background-color: #e6e6e6;
}
.item {
    color: white;
    text-align: center;
    margin: 5px;
    background-color: #008080;
}

Ta được giao diện hiển thị như hình sau:

Các thuộc tính CSS cho flex container

display

Để sử dụng Flexbox, chúng ta cần khai báo thuộc tính display: flex cho flex-container.

.container {
    display: flex; /* hoặc inline-flex */
}

Sau khi thêm thuộc tính này, các thành phần con trong nó sẽ là flex-item. Lúc này các item bên trong sẽ hiển thị theo chiều dọc (mỗi item 1 cột), tương ứng với trục main axis mặc định là chiều ngang.

flex-direction

Dùng để xác định hướng của main axis. Có 4 giá trị cho thuộc tính này:

flex-direction: row | row-reverse | column | column-reverse

Các tham số:

  • row: mặc định, flex item được sắp xếp theo chiều ngang từ trái qua phải.
  • row-reverse: flex item được sắp xếp theo chiều ngang từ phải qua trái.
  • colum: flex item được sắp xếp theo chiều dọc từ trên xuống dưới.
  • column-reverse: flex item được sắp xếp theo chiều dọc từ dưới lên trên.

Code cho ví dụ:

flex-wrap

Thuộc tính này giúp flex container có thể bọc lại các phần tử bên trong cho dù chiều rộng của chúng có vượt quá giới hạn thì vẫn không bị nhảy lung tung.

flex-wrap: nowrap | wrap | wrap-reverse

Các tham số:

  • nowrap: mặc định, giúp flex container có thể thay đổi kích thước các flex item bên trong để chúng hiển thị theo 1 dòng trên mọi kích thước.
  • wrap: khi kích thước flex container thay đổi và tổng chiều rộng các flex item cộng lại lớn hơn chiều rộng của flex container thì flex item sẽ tự động xuống dòng.
  • wrap-reverse: tương tự như wrap, nhưng thay vì xuống dòng thì flex item sẽ tự động nhảy lên trên.
flex-flow

Thuộc tính này dùng để gộp chung 2 thuộc tính flex-direction và flex-wrap.

Cú pháp:

flex-flow: <'flex-direction'> || <'flex-wrap'>

Ví dụ:

.container {
    display: flex;
    flex-flow: row wrap;
}
justify-content

Thuộc tính justify-content để điều chỉnh vị trí bắt đầu và căn chỉnh các flex item bên trong flex container.

flex-direction: flex-start | flex-end | center | space-between | space-around

Các tham số và minh họa:

  • flex-start: mặc định, flex item sẽ bắt đầu từ lề chính main start của flex container.
  • flex-end: các flex item được sắp xếp bên phải của flex container.
  • center: các flex item được sắp xếp ở giữa của flex container.
  • space-between: các flex item được phân bố đều trong flex container, phần tử đầu tiên nằm bên trái và phẩn tử cuối cùng nằm bên phải.
  • space-around: các flex item được phân bố đều không gian xung quanh kể cả phẩn tử đầu tiên và phần tử cuối cùng.
align-items

Thuộc tính align-items sử dụng để điều chỉnh vị trí bắt đầu và căn chỉnh các flex item bên trong flex container theo dọc theo trục cross axis.

align-items: stretch | flex-start | flex-end | center | baseline

Các tham số và minh họa:

stretch: giá trị mặc định, các phần tử sẽ được kéo dài để lấp đầy flex container chứa nó, nhưng sẽ ưu tiên giá trị height/width nếu có, khi đó phần tử sẽ không cao full mà chỉ lấy giá trị height/width mà bạn đặt.

flex-start: các flex item sẽ bắt đầu từ lề cross-start của flex container.

flex-end: các flex item sẽ bắt đầu từ lề cross-end của flex container.

center: các flex item sẽ căn giữa theo chiều của cross axis.

baseline: các flex item được căn chỉnh theo đường cơ sở của chúng.

align-content

Thuộc tính align-content sử dụng để căn chỉnh khoảng cách các flex item bên trong flex container theo dọc theo trục cross axis.

align-content: stretch | flex-start | flex-end | center | space-between | space-around

Các tham số và minh họa:

stretch: giá trị mặc định, các phần tử sẽ được kéo dài, căn chỉnh sao cho lấp đầy flex container chứa nó (vẫn ưu tiên giá trị height/width nếu có).

flex-start: các flex item sẽ bắt đầu từ lề chứa cross-start của flex container.

flex-end: các flex item sẽ bắt đầu từ lề chứa cross-end của flex container.

center: các flex item sẽ nằm giữa flex container căn theo cross-axis.

space-between: các flex item sẽ có khoảng cách giữa các phần tử bằng nhau do flex container tự động căn khoảng cách, flex item đầu tiên sát lề chứa cross-start, flex item cuối cùng sát lề chứa cross-end.

space-around: tương tự space-between, nhưng khác ở chỗ là mỗi flex item có khoảng cách 2 bên cạnh và những khoảng cách này bằng nhau.

Các thuộc tính CSS cho flex item

order

Thuộc tính order dùng để sắp xếp lại vị trí hiển thị của các flex item.

order: <integer>; /* mặc định là 0 */

Theo mặc định, các flex item sẽ hiển thị theo thứ tự xuất hiện trong HTML nhưng với thuộc tính order bạn có thể sắp xếp lại chúng.

flex-grow

Thuộc tính flex-grow có giá trị mặc định là 0.

flex-grow: <number>; /* mặc định là 0 */
flex-shrink

Thuộc tính flex-shrink có giá trị mặc định là 1.

flex-shrink: <number>; /* mặc định là 1 */
flex-basis

Thuộc tính flex-basis sử dụng để xác định độ dài ban đầu của một flex item.

flex-basis: <length> | auto; /* mặc định là auto */ 
flex

Thuộc tính flex sử dụng để gộp chung ba thuộc tính flex-grow, flex-shrink và flex-basis.

flex: none | [ <'flex-grow'> <'flex-shrink'> || <'flex-basis'> ] 
align-self

Thuộc tính align-self có tác dụng tương tự như align-items của phần flex container nhưng sử dụng riêng cho từng flex item, bạn có thể dùng nó để đặt lại vị trí cho một số flex item mà align-items đã quy định.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Align-self cũng có các giá trị giống như align-items đó là: flex-start, flex-end, center, stretch và baseline.

Lời kết

Qua bài viết này, mình đã giới thiệu về Flexbox trong CSS3 một trong những kiểu dàn trang tốt nhất có thể dùng thay thế cho kiểu dàn trang vẫn thường dùng là float. Hãy để lại comment ý kiến riêng của bạn nhé!

Nguồn: Tổng hợp

Thuở học sinh thích lướt web, chơi game. Ứng thi vào ĐH Công Nghiệp... đậu trường Nông Nghiệp, học CNTT. Đi làm là nhân viên Marketing... Tiếp cận, học PHP từ Joomla, sau làm Wordpress. Và hiện tại đang làm CodeIgniter, Laravel... Tối về viết Blog... và luôn cố gắng cập nhật những công nghệ mới mỗi ngày.