Dàn trang với CSS Flexbox toàn tập

[ / html ]
Và một đoạn CSS khởi đầu để thiết lập sắc tố và kích cỡ để dễ nhìn từng thành phần :

/** Global CSS **/

.container {

 background: red;

 max-width: 960px;

 max-height: 1000px;

 margin: 0 auto;

 padding: 5px;

}

.item {

 background: blue;

 margin: 5px;

 color: white;

 height: 50px;

 text-align: center;

 line-height: 50px;

}

Bây giờ chúng ta sẽ bắt đầu làm việc với Flexbox ở đây. Trước tiên chúng ta sẽ đưa .container về hiển thị ở dạng flexbox với display: flex.

/** Flex layout **/

.container {

 display: flex;

}

Bạn sẽ thấy những item bên trong đã tự hiển thị theo chiều dọc, tương ứng với trục main axis mặc định là chiều ngang .

Nếu bạn muốn đổi trục thì chỉ cần thêm thuộc tính flex-direction vào container. Cụ thể :

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

• flex-direction:
  • row: Chuyển trục main axis thành chiều ngang, nghĩa là hiển thị theo hàng.
  • colum: Chuyển trục main axis thành chiều dọc, nghĩa là hiển thị theo cột.
  • row-reverse: Hiển thị theo hàng nhưng đảo ngược vị trí các item.
  • column-reverse: Hiển thị theo cột nhưng đảo ngược vị trí các item.

Quá đơn thuần đúng không ?

flex-wrap

Bây giờ để hiểu cái này, chúng ta thử thêm chiều rộng cho mỗi item bên trong là 1000px xem chuyện gì sẽ xảy ra khi dùng flexbox.

.item {

 width: 1000px;

}

Như bạn thấy, dù tất cả chúng ta có thêm chiều rộng cho mỗi item bên trong là 1000 px nhưng nó vẫn hiển thị trên một hàng đều nhau. Lý do là mặc định, flexbox tự chỉnh sửa những thành phần hiển thị đều nhau theo trục main axis của nó dựa theo chiều rộng của container. Vì vậy mặc dầu bạn có chỉnh chiều rộng vượt quá số lượng giới hạn của nó thì nó vẫn không bị nhảy lung tung .

Bây giờ hãy thử thêm thuộc tính flex-wrap: wrap vào container thử nhé.

.container {

 display: flex;

 flex-wrap: wrap;

}

Nói nôm na là thuộc tính này được cho phép container hoàn toàn có thể bọc lại những item kể cả khi size của item bị đổi khác, mặc định là nowrap. Thuộc tính này hoàn toàn có thể vận dụng với cả chiều dọc của container và item. Các bạn xem video ở trên để rõ hơn .

order

Trong đoạn HTML ví dụ của mình trong bài này, mình có đặt số thứ tự cho mỗi thành phần là 1, 2, 3 và 4 với class tương ứng là. item1 ,. item ,. item3 và. item4. Mặc định item này sẽ hiển thị theo thứ tự trong HTML, nhưng với thuộc tính order tất cả chúng ta hoàn toàn có thể sắp xếp lại vị trí sắp xếp của những item .
Ví dụ mình có :

.item1 {

 order: 4;

}

.item2 {

 order: 3;

}

.item3 {

 order: 1;

}

.item4 {

 order: 2;

}

Mặc định thứ tự sắp xếp sẽ bắt đầu từ bên trái qua phải, từ trên xuống dưới. Nếu bạn chỉnh lại trục của main axis với thuộc tính flex-direction nó sẽ thay đổi ngược lại.

flex-grow

Để làm ví dụ này thứ nhất mình hãy bỏ công dụng wrap đi và thiết lập chiều rộng của item là 50 px .

.item {

 width: 50px;

}

Bây giờ ở .item2, mình cho giá trị flex-grow là 1 thử nhé.

.item2 {

 flex-grow: 1;

}

Khi thiết lập nó flex-grow là 1, thì nó sẽ lấy phần trống còn lại của container đắp vào. Bây giờ hãy thử cho .item1 với flex-grow: 2 thử.

.item1 {

 flex-grow: 2;

}

Lúc này giá trị flex-grow: 2 sẽ lấy phần dư lớn gấp đôi của flex-grow: 1.

flex-shrink

Bạn có thể hiểu mặc định tất cả các item đều có giá trị flex-shrink là 1. Điều này có nghĩa là khi chúng ta thu nhỏ trình duyệt lại, các phần tử đều co lại bằng nhau. Tuy nhiên giả sử mình muốn .item3 nó co lại nhiều hơn so với các item khác thì mình sẽ tăng giá trị flex-shrink của nó lên.

.item3 {

 flex-shrink: 2;

}

flex-basis

Cái này bạn hoàn toàn có thể hiểu đơn thuần nhất là gán cho item một size nhất định. Bạn hoàn toàn có thể sử dụng giá trị tuyệt đối hoặc tương đối ( địa thế căn cứ theo kích cỡ của container ) .

.item3 {

 flex-basis: 500px;

}

justify-content

Mặc định các item bên trong sẽ rải đều bắt đầu từ main start đến main end, tuy nhiên nếu container vẫn còn khoảng trống thì có thể dùng thuộc tính justify-content để điều chỉnh lại vị trí bắt đầu của nó.

Thuộc tính này có 5 giá trị và bạn hoàn toàn có thể xem tấm ảnh bên dưới mình mượn của CSS Tricks để hiểu hơn về ý nghĩa những giá trị của justify-content .

Đây là ví dụ :

.container {

 display: flex;

 justify-content: flex-end;

}

Trong bài này mình chỉ đề cập tới một số thuộc tính hay dùng trong Flexbox thôi, bạn có thể xem thêm danh sách thuộc tính Flexbox tại đây.

Lời kết

Flexbox trong CSS hoàn toàn có thể nói là một trong những kiểu dàn trang rất tốt để thay thế sửa chữa cho cách dàn trang thường thì là dùng float, thích hợp khi dàn trang những thành phần nhỏ trong website để hạn chế tối đa việc dùng float không thiết yếu .
Mặc dù hiện tại chưa phải tổng thể trình duyệt đều tương hỗ CSS Flexbox nhưng trong tương lai, chắc như đinh đây là một trong những tính năng mà những trình duyệt sẽ sớm tương hỗ do năng lực tiện lợi và tùy biến tốt của nó mang lại .