Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

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)

Làm chủ CSS3 Flexbox chỉ trong 10 phút

5/5 - (4 bình chọn)

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.

Làm chủ CSS3 Flexbox chỉ trong 10 phút flexbox

Contents

Flexbox là gì?

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

Khi nào không nên sử dụng Flexbox?

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

Làm chủ CSS3 Flexbox chỉ trong 10 phút support_flexbox

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

Cơ bản

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

Làm chủ CSS3 Flexbox chỉ trong 10 phút flex_box

Mở đầu

1. Tạo flex container

Làm chủ CSS3 Flexbox chỉ trong 10 phút flex_container

Để 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.

2. Đặt các flex items vào một cột

Làm chủ CSS3 Flexbox chỉ trong 10 phút flex_single_column

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

Làm chủ CSS3 Flexbox chỉ trong 10 phút flex_reverse

Căn chỉnh các flex items

1. Căn lề phải các flex items

Làm chủ CSS3 Flexbox chỉ trong 10 phút flex_right

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

2. Căn giữa các flex items

Làm chủ CSS3 Flexbox chỉ trong 10 phút align-items

3. Căn giữa các flex items theo 2 hướng

Làm chủ CSS3 Flexbox chỉ trong 10 phút flex_second_direction-1

4. Khoảng cách giữa các flex items

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.

5. Căn chỉnh một flex items riêng biệt

Bằng cách thiết lập justify-content: centeralign-items: center , các flex items được căn giữa container theo cả chiều ngang và chiều dọc.

Làm chủ CSS3 Flexbox chỉ trong 10 phút align_particular_item

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

Kết luận

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:

Hướng dẫn về Flexbox

Flexyboxes

Flexbox Froggy

W3C: CSS Flexible Box.

 

Tin mới nhất

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

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

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

Khách đang xem

  1. Trong bài này chúng ta sẽ tìm hiểu những thủ thuật tiếp theo giúp bạn hiển thị những chức năng...
    27 giây trước
  2. Google lighthouse đưa ra các chỉ số cần tối ưu đặc biệt là trong Performance, đối với nhiều anh em...
    27 giây trước
  3. Nghiên cứu từ khóa là một khâu quan trọng trong quá trình SEO website của bạn. Nó có mối liên...
    26 giây trước
  4. Để có một nội dung thu hút và hiệu quả trên Facebook, Trong thời buổi bùng nổ về công nghệ...
    16 giây trước
  5. Xây dựng liên kết là một trong những hoạt động SEO quan trọng nhất nhưng điều này không có nghĩa là...
    22 giây trước
  6. Tập tin .htaccess là một tập tin cấu hình mạnh mẽ cho phép bạn làm rất nhiều thứ trên trang...
    11 giây trước
  7. Muốn kiếm tiền Online với Google Adsence, Admod các bạn cần phải tuân thủ các chính sách của Google. Các...
    11 giây trước
  8. Google Page Speed, Google Lighthouse có quan trọng không, Core Web Vitals là gì và liệu nó có là một...
    3 giây trước
  9. Với nhiều năm kinh nghiêm trong việc thiết kế website, Lamvt đã trở thành cái tên quen thuộc với nhiều...
    21 giây trước
  10. Xây dựng liên kết - Link building là việc có được các liên kết bên ngoài thông qua việc trỏ...
    5 giây trước