Responsive Layouts with CSS Flexbox

Trong lập trình web thì việc bố cục các layout của trang thường dùng float hoặc các grid framework. Tuy nhiên thì CSS3 ra đời đã cho chúng ta thêm một sự lựa chọn mới cho việc dàn trải layout, đó chính là Flexbox Layout.

1.Tìm hiểu cơ bản về Flexbox Layout

Về cơ bản Flexbox Layout là một kỹ thuật dàn trang, nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Hiện tại Flexbox được khuyến khích dùng cho thiết lập bố cục trong phạm vi nhỏ. Và vì là 1 thuộc tính mới của css3 nên không phải tất cả các trình duyệt đều hỗ trợ, bạn tham khảo tại đây

Bố cục sử dụng flex bao giờ cũng có 2 phần: flex-container và các flex-items. Flex-container đơn giản chỉ là 1 layout có display: flex or inline-flex;

Các thuộc tính đi kèm với flex-container bao gồm

1. flex-direction dùng đề định hướng các flex-items theo 1 trục , có thể theo hàng ngang(row) , dọc (column), đảo ngược (row-reverse)
2. flex-wrap giúp phân bố các flex-item theo nhiều hàng, điều này rất có lợi khi hiển thị trên các thiết bị có màn hình nhỏ.
3. justify-content giúp sắp xếp các mục linh hoạt theo trục chính của dòng hiện tại trong khung linh hoạt. Nó giúp bổ sung không gian còn thừa ngay cả khi các mục linh hoạt trên một dòng không thể co giãn hoặc đã đạt đến kích thước tối đa. Do có khá nhiều thứ về Flexbox nên chúng ta sẽ làm quen với 1 ví dụ đơn giản về bố trí menu sử dụng flex.

2.Làm quen quá ví dụ đơn giản

Đầu tiên bạn hãy download project khởi tạo tại đây Chúng ta hãy cũng làm quen với thuộc tính flexbox với các ví dụ về menu. Đầu tiên là single menu . Nó có dạng 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 -->

Các item của menu đang nằm dọc dạng như thế này:

Để hiển thị các item năm ngang , cách truyền thống hay sử dụng đó là sử dụng thuộc tính float: letf;.Tuy nhiên với css3 thì chúng ta có thể làm cách khác. Tại thư mục CSS/nav-single-level.css. Chèn thử đoạn code sau:

@media screen and (min-width: 30em) {
	.single-nav ul {
		display: flex;
	}
}

Ngay lập tức chúng ta sẽ có dạng menu-ngang như thế này:

Điều lợi thế hơn khi dùng display: flex so với float là chúng ta không phải sử dụng thuộc tính clear. Để các item di chuyển về phía bên phải , chúng ta sử dụng thêm thuộc tính justify-content: flex-end;:

Còn ra giữa thì sài justify-content: center;

Khi màn hình có kích thước nhỏ, các menu-item sẽ bị co lại và bị ẩn các item ,để khắc phục vấn đề này , chúng ta sử dụng thuộc tính flex-wrap: wrap;

Before:

After:

Thuộc tính justify-content còn có 2 giá trị khá hữu ích khi chúng ta muốn căn chỉnh khoảng cách giữa các item là space-between và space-around.

Hãy thử sử dụng justify-content: space-between.

Lúc này các item đã được giãn cách khá đồng đều. Tuy nhiên 1 nhược điểm là khoảng cách giữa 2 item là khá lớn và width của từng item là không đồng đều. Để khắc phục nhược điểm này hãy sử dụng thuộc tính flex cho các item:

.single-nav li {
  flex: 1 0 auto;
}

Và menu của chúng ta cuối cùng được:

Có rất nhiều điểm thú vị nữa về flexbox bạn có thể tìm hiểu thêm tại đây, hoặc đây.