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í 15++ 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

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. Google đã giới thiệu một loại đơn vị quảng cáo AdSense mới gọi là 'Quảng cáo Native', làm tăng mối...
    22 giây trước
  2. 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à...
    23 giây trước
  3. Mấy hôm nay mình nhận được rất nhiều câu hỏi từ bạn bè live stream trực tiếp trên Fanpage như...
    24 giây trước
  4. Mô tả meta là một thẻ HTML giúp cung cấp thông tin quan trọng về nội dung trang web cho...
    16 giây trước
  5. Việc tối ưu hoá Website và Blog là một yếu tố thiết yếu trong chiến lược tiếp thị nội dung...
    20 giây trước
  6. Bạn có biết các yếu tố xếp hạng SEO sẽ tạo sự khác biệt cho doanh nghiệp của bạn trong...
    12 giây trước
  7. Google đã công bố dự án AMP- Accelerated Mobile Pages đây có vẻ như động thái đáp trả 2 đối...
    22 giây trước
  8. Search Engine Marketing hoặc SEM là một trong những cách hiệu quả nhất để phát triển doanh nghiệp của bạn...
    17 giây trước
  9. Trong bài này chúng ta sẽ tìm hiểu một thuộc tính khá quan trọng và được sử dụng khá phổ...
    15 giây trước
  10. Liên kết nội bộ thường bị bỏ qua trong cuộc chạy đua tối ưu hóa công cụ tìm kiếm. Mặc...
    17 giây trước