Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.
SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 17++ Năm (Từ 2006 đến Nay)
CSS Flexbox là một công cụ hữu ích cho việc bố cục trang web mà không sử dụng đến float hay position. Hiện nay, hầu hết các trình duyệt đều hỗ trợ thuộc tính Flexbox, khiến nó trở thành một trong những thuộc tính tiêu chuẩn trong thiết kế website.
Contents
Flexbox là viết tắt của “flexible box”, là một chế độ bố trí được giới thiệu trong CSS3 xác định cách các phần tử được sắp xếp trên một trang sao cho phù hợp với kích cỡ và thiết bị màn hình khác nhau.
Nó được gọi là Flexbox vì khả năng mở rộng và thu nhỏ các phần tử để lấp đầy khoảng trống sẵn có. So với các cách bố trí cũ như display table, float hay inline-block, Flexbox mạnh mẽ hơn:
– Bố trí các yếu tố theo các hướng khác nhau.
– Sắp xếp thứ tự hiển thị của các phần tử.
– Thay đổi sự liên kết của các phần tử.
– Tự động kết hợp các yếu tố vào container
Trong khi flexbox là rất tốt cho nhân rộng, sắp xếp và sắp xếp lại các yếu tố, không sử dụng nó:
– Bố cục tổng thể trang.
– Các trang web hỗ trợ đầy đủ các trình duyệt cũ.
Các trình duyệt cũ như IE11 hay thấp hơn, không hỗ trợ hoặc chỉ hỗ trợ một phần Flexbox. Nếu bạn muốn sử dụng nó an toàn, bạn nên quay trở lại các cách bố trí khác như display: inline-block
với float
và display: table
. Tuy nhiên, nếu bạn chỉ nhắm mục tiêu vào các trình duyệt hiện đại, Flexbox chắc chắn là đáng dùng.
Xem thêm: Trình duyệt hỗ trợ Flexbox
Trong mô hình Flexbox, bao gồm 3 khái niệm cốt lõi:
– flex items, các phần tử cần bố trí
– flex container, chứa các flex items
– flow direction, xác định hướng của các flex items
Để tạo flex container, bạn chỉ cần thêm thuộc tính display: flex
vào phần tử. Mặc định, các flex items được bố trí theo chiều ngang trong một hàng từ trái sang phải. Nếu tổng chiều rộng của các flex items lớn hơn container, các flex-items được thu nhỏ lại để phù hợp với container.
Các flex items được đặt theo chiều dọc bằng cách thiết lập flex-direction: column
. Nó cũng có thể đặt theo thứ tự ngược lại bằng cách thiết lập flex-direction: column-reverse
hoặc flex-direction: row-reverse
Hãy nhớ rằng bạn luôn xác định hướng của mỗi mô hình Flexbox. Thuộc tính justify-content: flex-end
nghĩa là các flex items sắp xếp đến cuối của flex container theo chiều ngang ( từ trái sang phải ).
Bạn có thể chỉ định khoảng cách xuất hiện giữa các flex items trong một container bằng cách sử dụng một trong ba giá trị của thuộc tính justify-content
– space-evenly
: Khoảng cách giữa container và flex items đầu tiên bằng khoảng cách giữa mỗi flex items và các flex items liền kề với nó.
– space-between
: Khoảng cách giữa 2 flex items liền kề bằng nhau nhưng không bằng khoảng cách giữa flex items đầu tiên/cuối cùng.
– space-around
: Khoảng cách giữa 2 flex items liền kề lớn gấp đôi khoảng cách giữa flex items đầu tiên/cuối cùng so với container.
Bằng cách thiết lập justify-content: center
và align-items: center
, các flex items được căn giữa container theo cả chiều ngang và chiều dọc.
Chúng ta có thể sắp xếp một flex items riêng biệt so với các flex items khác trong cùng container bằng cách sử dụng thuộc tính align-self
Flexbox rất dễ học và vận dụng. Với những kiến thức hữu ích này sẽ giúp chu trình phát triển website ngắn lại đồng thời tiết kiệm thời gian.
Xem thêm:
Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...
VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...
Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...
Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...
Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...
Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...
Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...
Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...
Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...
Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...