Hiển thị: nội dung css

Display Flex trong CSS là tính năng được nhiều nhà phát triển web ưa dùng. Điểm ưu tiên của Flexbox CSS là vô cùng linh hoạt, không yêu cầu cài đặt kích thước đối với từng phần tử của trang. Thay vào đó thuộc tính này sẽ giúp điều chỉnh và sắp xếp các khối một cách tự nhiên. Cùng Kiến Thức Phần Mềm tìm hiểu thế nào là Display Flex và cách xây dựng Layout với Flexbox CSS nhé

Hiển thị Flex trong CSS là gì?

Display Flex trong CSS W3Schools hay còn gọi là Hộp linh hoạt (Flexbox) là tính năng có sẵn trong CSS Hỗ trợ hỗ trợ và nâng cao hiệu quả tính toán của quá trình thiết kế trang web Responsive. Với Flexbox, các thành phần trên trang web sẽ được cân bằng khoảng cách và vị trí tự động mà không cần quy định kích thước

Trước đó, các Web Developer thường sử dụng thuộc tính Float khi thiết kế website. Tuy nhiên, điểm hạn chế của thuộc tính này là bạn phải thiết lập kích thước chiều cao, chiều rộng cụ thể cho từng phần tử, thiết lập định dạng hiển thị nội tuyến hoặc khối…

Flexbox ra đời đã giúp giải quyết triệt để những hạn chế này. Khi sử dụng Hộp linh hoạt, nhà phát triển web chỉ cần thiết lập hiển thị dưới dạng chiều dọc hoặc chiều ngang. Sau đó, các thành phần bên trong trang web có thể tự điều chỉnh kích thước, thứ tự xuất hiện… Tạo ra sự tương thích cao nhất với mọi kích thước màn hình và mọi thiết bị hiển thị

Display Flex giúp tạo ra các trang web có độ Responsive cao

Xem thêm. Giới thiệu các kiểu dữ liệu trong MySQL

Các thuật ngữ liên quan đến Display Flex trong CSS

Container và Item

Một Flexbox Layout sẽ bao gồm Parent Container (khung lớn) hoạt động như một Flex Container (khung linh hoạt). Kèm theo đó là các Immediate Children, được hiểu là các thẻ con bên trong khung lớn và giữ vai trò của Flex Item (mục nhỏ linh hoạt)

Sơ đồ sau sẽ giúp bạn hiểu rõ hơn về cấu trúc cơ bản của Flexbox Layout

Sơ đồ về cấu trúc cơ bản của Display Flex

Từ sơ đồ trên, có thể thấy một Flexbox sẽ có hai thành phần thiết yếu nhất đó là

• Thùng đựng hàng. Đây là khung bao quanh lớn và chứa bên trong nó các phần tử nhỏ hơn (mục). Cách thức hiển thị của các mục nhỏ bên trong sẽ được quyết định bởi cách thiết lập vùng chứa
• Mục. Hiểu được là phần tử con được chứa bên trong vùng chứa. Bạn có thể điều chỉnh các mục bằng cách thiết lập thứ tự hiển thị của mục hoặc số lượng trong cột chứa mục mà mục sẽ sử dụng

Vùng chứa và các mục là hai thành phần thiết yếu của Display Flex trong CSS

Cách bố trí các mục

Có hai cách bố trí các mục, đó là theo trục chéo trục (từ điểm bắt đầu chéo cho đến đầu cuối) hoặc trục chính (từ điểm bắt đầu chính cho đến đầu cuối)

• trục chính. Is main rule ĐỊNH HƯỚNG HIỂN THỊ CỦA CÁC MỤC. Bạn có thể thay đổi hướng của trục chính này bằng thuộc tính flex-direction
• Main-start và main-end. Khi Hộp linh hoạt được tạo nên, các mục sẽ được hiển thị trong vùng chứa từ điểm bắt đầu chính (điểm bắt đầu) cho đến điểm chính-end (điểm kết thúc)
• kích thước chính. Use to only height or width of each item. Những kích thước này sẽ được quyết định bởi hướng của trục chính
• trục chéo. Hiểu được góc vuông giữa với trục chính. Hướng của trục chéo sẽ được xác định bởi hướng của trục chính
• Bắt đầu chéo và kết thúc chéo. Cũng dùng để chỉ điểm bắt đầu và điểm kết thúc. Tuy nhiên, luôn luôn vuông góc với các điểm main-start và main-end
• kích thước chéo. chiều cao hoặc chiều rộng của mục do trục ngang quy định

Flex Container có thuộc tính gì?

Trưng bày

Khi muốn áp dụng Display Flex trong CSS, bạn chỉ cần nhập lệnh sau để khai báo thuộc tính hiển thị của vùng chứa bằng cú pháp sau

màn hình cú pháp

thùng đựng hàng {

trưng bày. uốn cong;

}

Lưu ý. Trong flex container thì các cột CSS thông thường sẽ không khả dụng

hướng uốn

Thuộc tính này có mục đích là quy định hướng của trục chính. Từ đó đưa ra cách các mục được bố trí trong vùng chứa

Mô tả về thuộc tính flex-direction

Cú pháp flex-direction

thùng đựng hàng {

hướng uốn. chèo thuyền. đảo ngược hàng. cột. đảo ngược cột;

}

Các tham số

• Chèo thuyền. Là thiết lập mặc định, trong đó trục chính sẽ nằm ngang và kéo theo các mục được bố trí theo hàng ngang, thứ tự từ trái sang phải
• hàng đảo ngược. Quy định trục chính đặt nằm ngang và các mục được bố trí theo chiều ngang, thứ tự từ phải sang trái
• Cột. Quy định trục chính theo chiều dọc, với các mục được bố trí theo chiều thẳng đứng, thứ tự từ trên xuống dưới
• đảo ngược cột. Quy định trục chính theo chiều dọc và các mục được bố trí theo chiều dọc, thứ tự từ dưới lên trên

uốn dẻo

Display Flex trong CSS sẽ cho phép các mục điều chỉnh kích thước phần tử tự động. Điều này nhằm giúp các phần tử được hiển thị đồng thời trên một trình duyệt được sử dụng để thay đổi kích thước ra sao. Tuy nhiên, tính năng này vô tình khiến nội dung bên trong có thể bị thu hồi hoặc giãn ra. Khiến giao diện trở nên không đẹp mắt

Chính vì vậy mà thuộc tính flex-wrap đã ra đời. Thuộc tính này giúp cho mục xuống dòng tự động khi có sự điều chỉnh về kích thước của vùng chứa

Mô tả về thuộc tính flex-wrap

Cú pháp flex-wrap

thùng đựng hàng{

uốn dẻo. bây giờ. bọc. quấn ngược;

}

Các tham số

• Bây giờ. is default tham số. With nowrap, toàn bộ các mục sẽ được hiển thị trên cùng một người dùng
• Bọc. Khi vùng chứa được điều chỉnh kích thước, mục sẽ xuống dòng tự động nếu chiều rộng của toàn bộ các mục cộng lại vượt quá chiều rộng của vùng chứa
• quấn ngược. Cũng giống với chức năng của lớp bọc, tuy nhiên item sẽ không xuống dòng mà nhảy lên tự động

dòng chảy linh hoạt

Flex-flow là sự kết hợp của hai thuộc tính flex-wrap và flex-direction

Cú pháp flex-flow

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

Justify-nội dung

Các mục sẽ được bố trí theo mặc định, từ được hiển thị từ điểm bắt đầu chính cho đến điểm kết thúc chính. Do that in the field HỢP HỢP Vẫn còn khoảng trống trong vùng chứa thì sao? . Thuộc tính này giúp điều chỉnh khởi động chính cũng như cân đối các mục theo trục chính của trục (có thể là chiều dọc hoặc chiều ngang tùy theo hướng uốn)

Mô tả về thuộc tính justify-content

Cú pháp biện minh cho nội dung

thùng đựng hàng {

biện minh cho nội dung. khởi động linh hoạt. kết thúc uốn cong. trung tâm. không gian giữa

không gian xung quanh. không gian đều;

}

Các tham số

• khởi động linh hoạt. Được thiết lập mặc định, mục sẽ hiển thị từ phía chính của khởi động chính trong vùng chứa
• kết thúc linh hoạt. Item will show from the main end in container
• Trung tâm. Item will display in between container
• Khoảng cách giữa. Vùng chứa sẽ điều chỉnh khoảng cách tự động để tạo khoảng cách giữa các mục bằng nhau. Mục được hiển thị đầu tiên chứa phần bắt đầu chính và nằm bên lề. Mục này hiển thị cuối cùng chứa phần cuối chính và nằm bên lề
• không gian xung quanh. Cũng giống như dấu cách giữa. Tuy nhiên, mỗi mục sẽ được quy định bởi khoảng cách hai bên. Những khoảng cách bên cạnh này sẽ được căn chỉnh bằng nhau
• Không gian đồng đều. Là cách bố trí các mục sao cho khoảng cách giữa các lề và mục cũng như giữa 2 mục bất kỳ là bằng nhau

Căn chỉnh các mục

Align-items là gì?

Mô tả về thuộc tính align-items

Cú pháp align-items trong CSS

thùng đựng hàng {

sắp xếp các mục. kéo dài. khởi động linh hoạt. kết thúc uốn cong. trung tâm. đường cơ sở;

}

Các tham số

• Kéo dài. Được thiết lập mặc định, trong đó các mục sẽ được điều chỉnh với kích thước dài hơn để lấp đầy vùng chứa đầy đủ. Tuy nhiên, bạn có thể thiết lập các giá trị chiều cao và chiều rộng cho mục. Như vậy mặt hàng sẽ không dài đầy đủ container mà có độ dài, độ rộng theo giá trị mà bạn cài đặt sẵn
• khởi động linh hoạt. Item will be show from by cross-start. Giả sử khi đặt trục ngang nằm dọc, trục chính nằm ngang và hướng uốn. hàng, các mục sẽ hiển thị bắt đầu từ trên xuống
• kết thúc linh hoạt. Item will be display from cross-end. Ví dụ khi thiết lập cross axi vertical vertical và flex-direction. row, you will see the items display to the bottom
• Trung tâm. Mục sẽ hiển thị căn giữa tùy chọn hướng của trục chéo
• đường cơ sở. Item will show the và căn chỉnh tùy thuộc vào đường cơ sở. Cụ thể, đường cơ sở được hiểu là bộ phận đặt các chữ cái. Bạn sẽ biết rõ hơn sự khác biệt bằng cách điều chỉnh phông chữ của mỗi mục khác nhau

Căn chỉnh nội dung

Thuộc tính này có chức năng cân bằng khoảng cách của các mục dựa trên trục ngang của trục (theo chiều dọc hoặc chiều ngang do định hướng flex)

Mô tả về thuộc tính align-content

Cú pháp align-content

thùng đựng hàng {

căn chỉnh nội dung. khởi động linh hoạt. kết thúc uốn cong. trung tâm. không gian giữa

không gian xung quanh. kéo dài;

}

Các tham số

• khởi động linh hoạt. Các mục sẽ hiển thị từ lề có chứa bắt đầu chéo
• kết thúc linh hoạt. Các mục sẽ hiển thị từ lề có chứa ký tự chéo
• Trung tâm. Các mục sẽ được cân chỉnh ở giữa vùng chứa và phụ thuộc vào trục chéo
• Khoảng cách giữa. Vùng chứa có thể căn chỉnh khoảng cách tự động kéo theo khoảng cách giữa các mục bằng nhau. Mục đầu tiên chứa bắt đầu chéo và nằm bên lề. Item is the end of the cross-end and is an sát lề
• không gian xung quanh. Cũng giống như khoảng cách giữa, tuy nhiên mỗi mục sẽ đi kèm với khoảng cách là hai bên và khoảng cách này được căn chỉnh bằng nhau
• Kéo dài. Được thiết lập mặc định, trong đó các mục sẽ được điều chỉnh với kích thước dài hơn để lấp đầy vùng chứa đầy đủ. Tuy nhiên, các giá trị chiều cao (height) và chiều rộng (width) vẫn được ưu tiên (nếu có)

Flex Item có thuộc tính gì?

Gọi món

Theo mặc định, thứ tự xuất hiện của mục trong HTML sẽ quy định thứ tự hiển thị của các mục. Tùy thuộc vào tính chất của đơn đặt hàng sẽ giúp bạn thay đổi vị trí của các mặt hàng

Thuộc tính Order description

cú pháp order

mục {

order: ; /* mặc định là 0 */

}

phát triển linh hoạt

Flex-grow trong CSS giúp kéo mở rộng các mục dựa trên độ rộng được điều chỉnh của vùng chứa. Thuộc tính flex-grow có giá trị mặc định bằng 0. Bạn có thể thay đổi giá trị mặc định này để kích thước các mục được co giãn tự động

Thuộc tính mô tả flex-grow

Cú pháp flex-grow

mục {

flex-grow: ; /* mặc định là 0 */

}

co giãn linh hoạt

Đảo ngược với flex-grow, flex-shrink khiến các mục co lại khi vùng chứa được thay đổi độ rộng. Flex-shrink thuộc tính Display Flex trong CSS có giá trị mặc định bằng 1. Như vậy khi container giảm độ rộng thì kích thước các item sẽ được thu hồi bằng nhau

Cú pháp flex-shrink

mục {

flex-shrink: ; /* mặc định là 1 */

}

cơ sở linh hoạt

Thuộc tính này được sử dụng để xác định mục có độ dài ban đầu là bao nhiêu

Cú pháp flex-basis

mục {

flex-basis: | auto; /* mặc định là auto */

}

Uốn cong

Thuộc tính flex là sự kết hợp của 3 thuộc tính bao gồm flex-basis, flex-shrink và flex-grow

Cú pháp flex

mục {

flex: none | [ <‘flex-grow’> <‘flex-shrink’> || <‘flex-basis’> ]

}

Lưu ý

• If found flex. 1 trong CSS, tức là chỉ có duy nhất một tham số, thì bạn có thể hiểu đó là thuộc tính flex-grow
• If found flex. 250px, tức là chỉ có duy nhất một tham số đơn vị độ dài, thì bạn có thể hiểu đó là thuộc tính flex-basis
• If found flex. 1 250px, tức là xuất hiện hai tham số (trong đó có 1 đơn vị đo độ dài), thì bạn có thể hiểu đó là hai thuộc tính flex-grow và flex-basis
• If found flex. 1 2, tức là xuất hiện hai tham số, thì bạn có thể hiểu đó là hai thuộc tính flex-grow và flex-shrink

Align-tự

Có chức năng gần giống với align-items. Tuy nhiên, align-self được áp dụng riêng cho từng mục. Align-self cho phép định lại vị trí của một số mục được thiết lập bởi align-items

Thuộc tính mô tả align-self

Cú pháp align-self

mục {

tự sắp xếp. Tự động. khởi động linh hoạt. kết thúc uốn cong. trung tâm. đường cơ sở. kéo dài;

}

Các tham số

Tương tự đối với align-items, align-self cũng đi kèm với các tham số như baseline, stretch, center, flex-start và flex-end

• Xem thêm. Lệnh CASE WHEN trong SQL tại đây

• Xem thêm. Lệnh INSERT INTO trong SQL tại đây

Hướng dẫn cách xây dựng cục bộ với Display Flex trong CSS

Bước 1. Sử dụng đoạn mã HTML sau đây để tạo tệp

<. LOẠI TÀI LIỆU html>

<đầu>

thùng đựng hàng {

bề rộng. 600px;

}

hộp1,. hộp2,. hộp3,. hộp4 {

lai lịch. #ddd;

biên giới. 2px rắn #FF0000;

đệm. 20px;

}

 

 

Bước 2. At container section, you add display. flex as after

thùng đựng hàng {

bề rộng. 600px;

trưng bày. uốn cong;

}

Bước 3. Chiều rộng thiết lập cho các mục

hộp1,. hộp2,. hộp3,. hộp4 {

uốn cong. 20%;

}

Bước 4. Như vậy là các mục đã được sắp xếp gọn gàng và thẳng hàng rồi

Hy vọng rằng bài viết trên của KTPM đã giúp bạn hiểu rõ hơn về tính năng Display Flex trong CSS. Flexbox thuộc tính giúp đơn giản hóa quá trình thiết kế trang web. Tuy nhiên, trước khi sử dụng Display Flex, bạn lưu tính năng này chỉ thích hợp để xây dựng bố cục phạm vi nhỏ. Với bố cục cục bộ có quy mô lớn hơn thì bạn vẫn nên ưu tiên kiểu bố cục lưới trang thông thường