Trang chủ Thủ thuật

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

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

Trước giờ, để dàn layout trong CSS, chúng ta thường sử dụng các thuộc tính float và kỹ thuật clear float để trình bày trang web theo ý mình hoặc để tiết kiệm thời gian hơn thì chúng ta có thể dùng các CSS Grid Framework. Tuy nhiên, với những ai làm việc với CSS thường xuyên thì với 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 thêm những đoạn CSS không cần thiết. Từ đó, CSS Flexbox được 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 việc tối ưu hóa kỹ thuật dàn trang linh hoạt hơn bằng CSS Flexbox.

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 1.

Flexbox là gì?

Flexbox (Flexible Box Module) là công cụ giúp tạo bố cục giao diện mềm dẻo, dễ tùy biến và phù hợp với tính năng Responsive. CSS Flexbox được thiết kế dưới dạng một mô hình layout một chiều và các phần tử sẽ được bố cục, phân bổ một cách phù hợp để hiển thị trên mọi thiết bị. 

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

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 2.

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 3.

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

Flex-container là 1 layout có display: flex or inline-flex;

    Flex-direction

Flex-direction dùng để định hướng các flex-items theo 1 trục, bao gồm: 

row (mặc định): Hiển thị các item theo chiều ngang từ trái qua phải.

row-reverse: Hiển thị các item theo chiều ngang thứ tự đảo ngược.

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

column-reverse: Hiển thị tất cả item theo chiều dọc đảo ngược.

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 4.

Ví dụ: 

.container {

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

}

    Flex-wrap

Flex-wrap giúp phân bố các flex-item theo nhiều hàng thích hợp khi hiển thị trên các thiết bị có màn hình nhỏ.

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 5.

Ví dụ cú pháp: 

.container{

  flex-wrap: nowrap | wrap | wrap-reverse;

}

no-wrap (mặc định): Tất cả các item sẽ nằm trên một hàng hoặc một cột.

wrap: Các item có thể tách thành nhiều hàng nếu không đủ diện tích theo chiều của flex-direction.

wrap-reverse: Các item được tách thành nhiều hàng khi không đủ diện tích theo chiều ngược lại của flex-direction.

    Justify-content

Justify-content giúp dàn trang linh hoạt theo 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 dòng không giãn hoặc đã có kích thước tối đa. 

Justify-content bao gồm: 

flex-start: Các item căn từ điểm bắt đầu của trục chính.

flex-end: Các item căn từ điểm kết thúc của trục chính.

center: Các item được căn ở giữa của trục chính.

space-between: Các item được bố trí đều nhau từ điểm bắt đầu của trục chính. 

space-around: Các item được bố trí đều nhau kèm các khoảng trống xung quanh mỗi item đều giống nhau.

space-evenly: Các item được bố trí với khoảng trống giữ 2 item bằng nhau.

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 6.

Ví dụ code: 

.container {

  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... safe | unsafe;

}

Lưu ý: Không phải tất cả các trình duyệt đều hỗ trợ thuộc tính này. Ví dụ, space-between không bao giờ hỗ trợ đối với một số phiên bản của Edge, và start/end/left/right cũng không có trên Chrome. Những thuộc tính an toàn nhất đó là flex-start, flex-end và center.

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

    Thứ tự (Order) 
Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 7.

Flex-item được thể hiện theo thứ tự gốc. Tuy nhiên, thuộc tính thứ tự quyết định trình tự hiển thị trên flex-container.

Giá trị thứ tự phải là các con số, mặc định bắt đầu từ số "0"

Ví dụ:

<div class="flex-container">

  <div style="order: 3">1</div>

  <div style="order: 2">2</div>

  <div style="order: 4">3</div>

  <div style="order: 1">4</div>

</div>

    Flex-grow

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 8.

Thuộc tính flex-grow nhằm xác định một flex-item sẽ có kích thước tương quan với những flex-item còn lại. 

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

Ví dụ: 

.item {

  flex-grow: <number>; /* default 0 */

}

    Flex-shrink

Thuộc tính này dùng để co các item lại nếu cần thiết. Các biến âm không có giá trị.

Ví dụ:

.item {

  flex-shrink: <number>; /* default 1 */

}

    Flex-basic

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

Ví dụ:

.item {

  flex-basis: <length> | auto; /* default auto */

}

    Flex

Flex là tên gọi tắt của tổ hợp flex-grow, flex-shrink và flex-basic. Số mặc định là 0 1 auto, nếu bạn cài đặt một giá trị số đơn, thì sẽ như <số> 1 0.

Ví dụ:

.item {

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

}

Ví dụ dàn trang linh hoạt với Flexbox layout

Bước 1: Download project. 

Bước 2: Làm quen với Flexbox qua ví dụ tạo single menu. 

Chúng ta nhập html như sau: 

<section class="menu-section">

    <h2 class="menu-heading">Single Level Menu</h2>

    <nav id="single-nav" class="single-nav menu" role="navigation">

        <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Food</a></li>

            <li><a href="#">Classes</a></li>

            <li><a href="#">Recipes</a></li>

            <li><a href="#">News</a></li>

            <li><a href="#">About</a></li>

            <li><a href="#">Contact</a></li>

        </ul>

    </nav><!-- #single-nav .single-nav -->

</section><!-- menu-section -->

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 9.

Menu đượ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ẽ dùng thuộc tính float: letf;.Nhưng, với CSS Flexbox bạn thử nhập đoạn code sau đây:

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

.single-nav ul {

display: flex;

}

}

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 10.

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

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

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 11.

Để chuyển ra giữa trang ta dùng justify-content: center;

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 12.

Bước 5: Thử dùng thuộc tính flex cho các item. 

Bạn nhập đoạn code: 

.single-nav li {

  flex: 1 0 auto;

}

Đây là thành quả thu được: 

Dàn trang linh hoạt hơn với CSS Flexbox - Ảnh 13.

Tổng kết

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

Theo BizFly Cloud

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

BizFly Cloud là hệ sinh thái điện toán đám mây được vận hành bởi VCCorp - Công ty dẫn đầu trong lĩnh vực công nghệ và truyền thông tại Việt Nam. Với đội ngũ kỹ thuật viên trình độ cao và kinh nghiệm lâu năm làm việc trên các công nghệ khác nhau như cloud, mobile, web..., chúng tôi có đủ khả năng để hỗ trợ đưa ra những giải pháp và công nghệ toàn diện giúp doanh nghiệp chuyển đổi số thành công. Dành cho độc giả quan tâm tới các dịch vụ đám mây do BizFly Cloud cung cấp có thể truy cập tại đây.