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.

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. 

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.

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ỏ.

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.

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) 

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

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 -->

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;

}

}

Ư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; 

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

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: 

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