Dàn trang linh hoạt hơn với CSS Flexbox

Trước đây, để bố cục trong CSS, chúng ta thường sử dụng thuộc tính float và kỹ thuật clear float để trình bày trang web theo ý muốn hoặc để tiết kiệm thời gian hơn, chúng ta có thể sử dụng CSS Grid Framework. Tuy nhiên, đối với những người làm việc với CSS thường xuyên, cách làm truyền thống này cũng khá phức tạp và có thể khiến trang web của chúng ta chứa nhiều CSS không cần thiết. Từ đó, CSS Flexbox ra đời giúp cải thiện những nhược điểm của cách làm truyền thống bao gồm tối ưu hóa kỹ thuật bố cục linh hoạt hơn với CSS Flexbox.

Flexbox là gì?

Flexbox (Mô-đun Hộp linh hoạt) là một công cụ giúp tạo bố cục giao diện linh hoạt, có thể tùy chỉnh và đáp ứng. CSS Flexbox được thiết kế dưới dạng mô hình bố cục một chiều và các phần tử sẽ được sắp xếp và phân bổ hợp lý để hiển thị trên mọi thiết bị.

Bố cục flexbox bao gồm phần tử mẹ (flex-container) và các phần tử con (flex-item). Flex-container và flex-item đều có các thuộc tính riêng.

Thuộc tính của Flex-container

Flex-container là một bố cục có hiển thị: flex hoặc inline-flex;

Hướng linh hoạt

Hướng linh hoạt được sử dụng để định hướng các mục uốn theo 1 trục, bao gồm:

hàng (mặc định): Hiển thị các mục theo chiều ngang từ trái sang phải.

ngược hàng: Hiển thị các mục theo chiều ngang theo thứ tự ngược lại.

cột: Hiển thị tất cả các mục theo chiều dọc từ trên xuống dưới.

cột ngược: Hiển thị tất cả các mục được đảo ngược theo chiều dọc.

Ví dụ:

.thùng đựng hàng {

flex-hướng: hàng | ngược hàng | cột | ngược cột;

}

Bọc linh hoạt

Flex-wrap giúp phân phối các mục linh hoạt trong các hàng thích hợp khi hiển thị trên các thiết bị có màn hình nhỏ.

Ví dụ về cú pháp:

.thùng đựng hàng {

flex-wrap: nowrap | bọc | quấn-ngược;

}

không quấn (mặc định): Tất cả các mục sẽ ở trong một hàng hoặc cột.

bọc lại: Các mục có thể được tách thành nhiều hàng nếu không có đủ diện tích theo hướng uốn cong.

quấn ngược: Các mục được chia thành nhiều hàng khi không có đủ diện tích theo hướng ngược lại với hướng uốn.

Căn đều-nội dung

Căn đều-nội dung cung cấp một bố cục linh hoạt cho trục chính của dòng hiện tại. Thuộc tính này giúp thêm khoảng trắng ngay cả khi các mục linh hoạt trong một đường thẳng không bị kéo dài hoặc đã được tăng kích thước tối đa.

Justify-content bao gồm:

khởi động linh hoạt: Các mục được căn chỉnh từ điểm bắt đầu của trục chính.

flex-end: Các mục được căn chỉnh từ cuối trục chính.

trung tâm: Các mục được căn giữa trên trục chính.

không gian giữa: Các mục được sắp xếp đều nhau từ điểm bắt đầu của trục chính.

không gian xung quanh: Các mục được sắp xếp đồng đều với các khoảng trống xung quanh mỗi mục là như nhau.

không gian-đồng đều: Các đồ vật được sắp xếp với một khoảng trống chứa 2 đồ vật bằng nhau.

Ví dụ về mã:

.thùng đựng hàng {

justify-content: flex-start | flex-end | trung tâm | không gian giữa | không gian xung quanh | không gian-đồng đều | bắt đầu | kết thúc | trái | đúng … an toàn | không an toàn;

}

Ghi chú: Không phải tất cả các trình duyệt đều hỗ trợ thuộc tính này. Ví dụ: khoảng trắng giữa không bao giờ hỗ trợ một số phiên bản Edge và start / end / left / right cũng không khả dụng trong Chrome. Các thuộc tính an toàn nhất là flex-start, flex-end và center.

Thuộc tính của Flex-item

Đặt hàng

Mục linh hoạt được hiển thị theo thứ tự ban đầu. Tuy nhiên, thuộc tính order xác định thứ tự được hiển thị trên flex-container.

Giá trị thứ tự phải là số, mặc định bắt đầu bằng “0”

Ví dụ:

Flex-Grow

Thuộc tính flex-grow chỉ định rằng một item flex sẽ có kích thước so với phần còn lại của các item flex.

Tương tự như thứ tự, các giá trị phải là một số, bắt đầu bằng 0 theo mặc định.

Ví dụ:

.mục {

flex-grow: ; / * mặc định 0 * /

}

Co lại

Thuộc tính này được sử dụng để thu nhỏ các mục nếu cần. Các biến phủ định không có giá trị.

Ví dụ:

.mục {

uốn cong: ; / * mặc định 1 * /

}

Flex-cơ bản

Thuộc tính này chỉ định kích thước mặc định của một phần tử trước khi phân bổ các khoảng trắng còn lại.

Ví dụ:

.mục {

cơ sở linh hoạt: | Tự động; / * tự động mặc định * /

}

Flex

Flex là chữ viết tắt của flex-grow, flex-co và flex-basic. Số mặc định là 0 1 tự động, nếu bạn đặt một giá trị số, nó sẽ giống như 1 0.

Ví dụ:

.mục {

flex: không có | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

}

Ví dụ về bố cục trang linh hoạt với bố cục Flexbox

Bước 1: Tải xuống dự án.

Bước 2: Làm quen với Flexbox thông qua một ví dụ về cách tạo một menu.

Chúng tôi nhập html như sau:

<section class = “menu-section”>

Menu cấp độ đơn

Thực đơn được trình bày theo chiều dọc

Bước 3: Chuyển menu dọc sang menu ngang:

Trước đây, bạn sẽ sử dụng float: letf ;.

@media screen and (min-width: 30em) {

.single-nav ul {

hiển thị: flex;

}

}

Ưu điểm của CSS Flexbox là chúng ta bỏ qua bước sử dụng thuộc tính clear trong float.

Bước 4: Thử sử dụng thuộc tính: justify-content: flex-end để di chuyển sang bên phải;

Để chuyển đổi giữa các trang, chúng tôi sử dụng justify-content: center;

Bước 5: Hãy thử sử dụng thuộc tính flex cho các mặt hàng.

Bạn nhập mã:

.điều hướng đơn

flex: 1 0 auto;

}

Đây là kết quả:

Lời Kết

Qua bài viết này, bạn có thể thấy được những ưu điểm và lợi ích của Flexbox. Hãy theo dõi những bài viết thú vị khác!

Theo Rapidsharefiles

>> >> Có thể bạn quan tâm: Thủ thuật CSS và mẹo hay dành cho nhà phát triển