search

Flex-wrap CSS là gì

2 năms trước
Trả lời: 0
Lượt xem: 390

Ở những bài học trước, Quantrimang.com đã hướng dẫn bạn cách thiết kế bố cục trang web bằng cách sử dụng thuộc tính float, kỹ thuật clear float hay đặt các position lồng nhau. Tuy nhiên phương pháp này thường phải viết khá nhiều code CSS và kết quả thì thực sự là khó đoán trước, có thể như ý bạn, cũng có thể cực kì... tệ.

Show

Nhưng thật may mắn, Flexbox Layout đã ra đời để cải thiện những nhược điểm này. Với Flexbox, bạn có thể giải quyết rất nhiều vấn đề về dàn trang trong CSS một cách linh hoạt, dễ dàng và tiết kiệm thời gian chỉ bằng một vài dòng code. Vậy chúng ta cùng tìm hiểu xem Flexbox là gì và lý do tại sao nó lại mạnh mẽ như vậy?

Nội dung

  • Flexbox là gì?
  • Các khái niệm cơ bản và thuật ngữ
  • Các thuộc tính của Flex Container
  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • Các thuộc tính của Flex Item
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
  • Tạo thư viện ảnh sử dụng Flexbox
  • Flexbox Layout website kiểu mẫu

Flexbox là gì?

Flex-wrap CSS là gì

Flexbox Layout (hay còn gọi là Flexible Box) là một kiểu bố cục trang có khả năng tự cân đối kích thước, thay đổi chiều rộng/chiều cao và thứ tự phần tử bên trong để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình.

Với bố cục thông thường, bạn cần phải thiết lập kích thước của phần tử, thiết lập hiển thị dạng block hay inline, cho nó float, còn với Flexbox bạn chỉ cần thiết lập phần hiển thị theo chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn..

Lưu ý: Flexbox Layout phù hợp nhất để thiết lập bố cục ở quy mô nhỏ, còn thiết lập bố cục với phạm vi lớn hơn thì vẫn nên sử dụng kiểu thông thường là dàn trang theo dạng lưới (grid layout).

Các khái niệm cơ bản và thuật ngữ

Bố cục Flex được thiết lập từ một khung lớn (parent container) đóng vai trò là khung linh hoạt (flex containter) và các thẻ con ngay trong nó (immediate children) đóng vai trò các mục nhỏ linh hoạt (flex item).

Dưới đây là sơ đồ cấu trúc Flexbox:

Flex-wrap CSS là gì

Thành phần quan trọng nhất của Flexbox là

  • container: là thành phần lớn bao quanh các phần tử bên trong, các item bên trong sẽ hiển thị dựa trên thiết lập của container này.
  • item: là phần tử con của container, bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một container, hoặc thiết lập thứ tự hiển thị của nó.
Flex-wrap CSS là gì
Flex-wrap CSS là gì

Các item sẽ được bố trí theo trục main axis (bắt đầu từ main-start, kết thúc ở main-end) hoặc theo trục cross axis (bắt đầu từ cross-start, kết thúc ở cross-end).

  • main axis: đây là trục chính để điều khiển hướng mà các item sẽ hiển thị. Lưu ý, main axis không phải lúc nào cũng nằm ngang như sơ đồ trên, bạn có thể sử dụng thuộc tính flex-direction để thay đổi hướng của trục và lúc đó các item sẽ hiển thị theo nó.
  • main-start | main-end: khi thiết lập flexbox, các item nằm trong container hiển thị từ điểm bắt đầu gọi là main-start tới điểm kết thúc gọi là main-end.
  • main size: kích thước (chiều rộng hoặc chiều cao) của các item, tùy thuộc vào hướng của main axis.
  • cross axis: cross axis luôn là trục vuông góc của main axis. Hướng của nó phụ thuộc vào hướng của main axis.
  • cross-start | cross-end: có ý nghĩa tương tự nhưng luôn vuông góc với main start, main end.
  • cross size: kích thước (chiều rộng hoặc chiều cao) của các item dựa trên trục cross axis, tùy thuộc vào hướng của main axis.

Các thuộc tính của Flex Container

Flex-wrap CSS là gì

display

Để sử dụng flex trong css thì đơn giản là chúng ta chỉ cần khai báo thuộc tính display: flex

.container {

Lưu ý: các cột CSS thông thường không sử dụng được trong flex container.

flex-direction

Thuộc tính flex-direction xác định hướng của main-axis để container sắp xếp các item.

Flex-wrap CSS là gì
Flex-wrap CSS là gì

Cú pháp:

.container {

Các tham số:

  • row: mặc định, flex item được sắp xếp theo chiều ngang, từ trái qua phải (main axis nằm ngang).
  • row-reverse: flex item được sắp xếp theo chiều ngang, từ phải qua trái (main axis nằm ngang).
  • column: flex item được sắp xếp theo chiều dọc, từ trên xuống dưới (main axis đứng dọc).
  • column-reverse: flex item được sắp xếp theo chiều dọc, từ dưới lên trên (main axis đứng dọc).

Ví dụ:

.flex-container {
  display: flex;
  flex-direction: row;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  flex-direction: row-reverse;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  flex-direction: column;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  flex-direction: column-reverse;
}
Flex-wrap CSS là gì

Code đầy đủ:

<!DOCTYPE html>

flex-wrap

Flex-wrap CSS là gì

Theo mặc định, item sẽ tự động thay đổi kích thước phần tử để nó luôn hiển thị trên cùng một dòng dù bạn có resize trình duyệt theo kích thước nào, điều này dễ làm cho nội dung bên trong (nếu có) bị giãn hay ép nhỏ lại, có thể gây xấu giao diện.

Vì vậy, ta có thuộc tính flex-wrap cho phép item tự động xuống dòng khi kích thước container thay đổi.

Cú pháp:

.container{

Tham số:

  • nowrap: mặc định, tất cả các item sẽ nằm trên một dòng.
  • wrap: khi kích thước container thay đổi và tổng chiều rộng các item cộng lại lớn hơn chiều rộng của container thì item sẽ tự động xuống dòng.
  • wrap-reverse: tương tự như wrap, nhưng thay vì xuống dòng thì item sẽ tự động nhảy lên trên.

Ví dụ:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  flex-wrap: wrap;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  flex-wrap: wrap-reverse;
}
Flex-wrap CSS là gì

Chạy code sau rồi thử resize trình duyệt để thấy rõ hơn sự khác biệt nhé:

<!DOCTYPE html>

flex-flow

Thuộc tính flex-flow sử dụng để gộp chung hai thuộc tính flex-direction và flex-wrap.

Cú pháp:

flex-flow: <'flex-direction'> || <'flex-wrap'>

Ví dụ:

.flex-container {

justify-content

Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì

Theo mặc định, các item bên trong sẽ bắt đầu từ main start đến main end, tuy nhiên, đôi khi container vẫn còn khoảng trống. Vì vậy, bạn có thể sử dụng thuộc tính justify-content để điều chỉnh vị trí bắt đầu và căn chỉnh các item bên trong container theo dọc theo trục main axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

Cú pháp:

.container {

Các tham số:

  • flex-start: giá trị mặc định, item sẽ bắt đầu từ lề chính main-start của container.
  • flex-end: item sẽ bắt đầu từ lề chính main-end của container (khác với row-reverse là đổi hướng hiển thị).
  • center: item sẽ nằm giữa container.
  • space-between: các item sẽ có khoảng cách giữa các phần tử bằng nhau do container sẽ tự động căn khoảng cách, item đầu tiên sát lề chứa điểm main-start, item cuối cùng sát lề chứa điểm main-end.
  • space-around: tương tự space-between, nhưng khác ở chỗ là mỗi item có khoảng cách 2 bên cạnh và những khoảng cách này bằng nhau.
  • space-evenly: các item được phân phối sao cho khoảng cách giữa hai item bất kỳ, giữa item và các lề là bằng nhau.

Ví dụ: Ở đây main axis nằm ngang

.flex-container {
  display: flex;
  justify-content: flex-start;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  justify-content: flex-end;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  justify-content: center;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  justify-content: space-between;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  justify-content: space-evenly;
}
Flex-wrap CSS là gì
.flex-container {
  display: flex;
  justify-content: space-around;
}
Flex-wrap CSS là gì

Thay các giá trị vào code để thấy sự khác biệt nhé:

<!DOCTYPE html>

align-items

Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì

Thuộc tính align-items sử dụng để điều chỉnh vị trí bắt đầu và căn chỉnh các item bên trong container theo dọc theo trục cross axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

Cú pháp:

.container {

Các tham số và ví dụ minh họa

stretch: giá trị mặc định, các phần tử sẽ được kéo dài để lấp đầy container chứa nó, nhưng sẽ ưu tiên giá trị height/width nếu có, khi đó item sẽ không cao full mà chỉ lấy giá trị height/width mà bạn set.

.flex-container {
Flex-wrap CSS là gì

flex-start: item sẽ bắt đầu từ lề cross-start của container.

Ví dụ trường hợp mặc định với main axis nằm ngang, cross axis đứng dọc, flex-direction: row thì các item sẽ bắt đầu từ trên.

.flex-container {
Flex-wrap CSS là gì

flex-end: item sẽ bắt đầu từ lề cross-end của container. Trường hợp mặc định với cross axis đứng dọc, flex-direction: row thì các item sẽ dồn xuống dưới.

.flex-container {
Flex-wrap CSS là gì

center: item sẽ căn giữa theo chiều của cross axis.

.flex-container {
Flex-wrap CSS là gì

baseline: item được căn chỉnh theo đường cơ sở của chúng.

Đường cơ sở là đường mà tất cả các chữ cái sẽ "ngồi lên". Bạn có thể sử dụng kích thước font chữ khác nhau để thấy rằng các mục được căn chỉnh theo đường cơ sở baseline:

.flex-container {
Flex-wrap CSS là gì

Code đầy đủ, thay các giá trị để thấy rõ hơn.

<!DOCTYPE html>

align-content

Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì
Flex-wrap CSS là gì

Thuộc tính align-content sử dụng để căn chỉnh khoảng cách các item bên trong container theo dọc theo trục cross axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

Cú pháp:

.container {

Các tham số:

flex-start: item sẽ bắt đầu từ lề chứa cross-start của container.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
Flex-wrap CSS là gì

flex-end: item sẽ bắt đầu từ lề chứa cross-end của container.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}
Flex-wrap CSS là gì

center: item sẽ nằm giữa container căn theo cross-axis.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}
Flex-wrap CSS là gì

space-between: các item sẽ có khoảng cách giữa các phần tử bằng nhau do container tự động căn khoảng cách, item đầu tiên sát lề chứa cross-start, item cuối cùng sát lề chứa cross-end.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
Flex-wrap CSS là gì

space-around: tương tự space-between, nhưng khác ở chỗ là mỗi item có khoảng cách 2 bên cạnh và những khoảng cách này bằng nhau.

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
Flex-wrap CSS là gì

stretch: giá trị mặc định, các phần tử sẽ được kéo dài, căn chỉnh sao cho lấp đầy container chứa nó (vẫn ưu tiên giá trị height/width nếu có).

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}
Flex-wrap CSS là gì

Code đầy đủ:

<!DOCTYPE html>

Các thuộc tính của Flex Item

Flex-wrap CSS là gì

order

Theo mặc định, các item sẽ hiển thị theo thứ tự xuất hiện trong HTML, nhưng với thuộc tính order, bạn có thể sắp xếp lại vị trí sắp xếp của các item.

Flex-wrap CSS là gì

Cú pháp:

.item {

Ví dụ:

<div class="flex-container">
Flex-wrap CSS là gì

flex-grow

Flex-wrap CSS là gì

Thuộc tính flex-grow cho phép các phần tử giãn theo độ rộng của container.

Cú pháp:

.item {

Thuộc tính này hơi phức tạp, Quantrimang sẽ minh họa một số trường hợp hay gặp cho bạn dễ hình dung hơn. Ví dụ ta set các item có độ rộng là 100px.

Flex-wrap CSS là gì

Giá trị mặc định của thuộc tính flex-grow là 0, các item sẽ không tự động co giãn kích thước, để lại nhiều khoảng trống trong container.

Khi ta tăng flex-grow = 1, item sẽ tự động giãn ra đều nhau sao cho vừa với khung container.

Flex-wrap CSS là gì

Giá trị của flex-grow rất linh động, khi set thuộc tính này cho tất cả các item với cùng một giá trị thì các item sẽ có tỉ lệ như nhau và được dàn đều lấp đầy container. Ví dụ set tất cả các phần tử flex-grow là 1 thì tất cả đều như nhau tỉ lệ 1:1, mà set flex-grow là 100 thì kết qua vẫn sẽ ra tương tự với tỉ lệ 1:1.

Nhưng điều thú vị hơn ở flex-grow là áp dụng nó cho từng item. Ta có giá trị mặc định ở tất cả phần tử là flex-grow = 0, thay đổi riêng giá trị của item2 thành 1, kết quả như sau:

Flex-wrap CSS là gì

Vậy là ở đây, thiết lập flex-grow là 1 thì item2 sẽ lấy phần trống còn lại của container đắp vào chính nó.

Bây giờ hãy thử cho các phần tử đều là flex-grow: 1, nhưng set riêng phần tử thứ 3 giá trị khác:

Flex-wrap CSS là gì

Lúc này thì tất cả các item đều được giãn ra lấp đầy phần trống của container, nhưng item3 có flex-grow: 3 sẽ được thừa hưởng nhiều phần trống hơn các item còn lại chỉ có flex-grow: 1, cụ thể là hơn khoảng 3 lần. Và như đã đề cập ở trên, thuộc tính flex-grow làm cho các phần tử tỉ lệ với nhau. Giả sử các item đều có flex-grow: 4 và item3 có thuộc tính flex-grow: 12 thì nó cũng tương tự như là 1 với 3.

Bạn tự thay đổi các giá trị để hiểu rõ hơn nhé.

<!DOCTYPE html>

flex-shrink

Thuộc tính flex-shrink ngược lại với thuộc tính flex-grow ở trên, nó không giãn ra mà lại co lại khi chúng ta thay đổi độ rộng của container.

Cú pháp:

.item {

Giá trị mặc định trong flex-shrink là 1, cho phép các phần tử co lại bằng nhau khi độ rộng container giảm xuống. Nếu flex-shrink: 0 thì item sẽ không co giãn mà lấy nguyên giá trị của thuộc tính width/height.

Nếu muốn item3 nó co lại nhiều hơn so với các item khác thì tăng giá trị flex-shrink của nó lên.

Flex-wrap CSS là gì

Resize cửa sổ trình duyệt nhỏ lại thì item3 co lại nhiều hơn:

Flex-wrap CSS là gì

flex-basis

Thuộc tính flex-basis sử dụng để xác định độ dài ban đầu của một item.

Cú pháp:

.item {

Nếu bạn xác định độ dài chung của class item là 100px nhưng tùy chỉnh item3 với flex-basis: 250px thì ta sẽ được như sau:

Flex-wrap CSS là gì

flex

Thuộc tính flex sử dụng để gộp chung ba thuộc tính flex-grow, flex-shrink và flex-basis.

Cú pháp:

.item {

Thay vì phải sử dụng cả 3 thuộc tính:

.item {

Thì bạn có thể sử dụng thuộc tính flex một cách ngắn gọn:

flex: 1 3 250px;

Giá trị mặc định của flex là:

flex: 0 1 auto;

Lưu ý:

  • Nếu thuộc tính chỉ có một tham số thế này: flex: 1; thì ta hiểu đó là flex-grow.
  • Nếu thuộc tính chỉ có một tham số có đơn vị độ dài như thế này: flex: 250px; thì ta hiểu đó là flex-basis.
  • Nếu thuộc tính có hai tham số thế này: flex: 1 250px; thì ta hiểu đó là flex-grow và flex-basis.
  • Nếu thuộc tính có hai tham số thế này: flex: 1 2; thì ta hiểu đó là flex-grow và flex-shrink.

align-self

Flex-wrap CSS là gì

Thuộc tính align-self có tác dụng tương tự như align-items của phần container nhưng sử dụng riêng cho từng item, bạn có thể dùng nó để đặt lại vị trí cho một số item mà align-items đã quy định.

.item {

Align-self cũng có các giá trị giống như align-items đó là: flex-start, flex-end, center, stretch và baseline.

Ví dụ: Ta có 5 item đã được căn ra giữa nhờ align-items:center như sau:

Flex-wrap CSS là gì

Bạn có thể căn chỉnh các item theo ý thích, item1 nằm ở trên cùng, item3 thì phải kéo giãn dài ra và item5 thì phải nằm dưới cùng, hãy dùng align-self để đặt lại các vị trí.

<div class="flex-container">
Flex-wrap CSS là gì

Tạo thư viện ảnh sử dụng Flexbox

Sử dụng flexbox để tạo một bộ sưu tập ảnh hiển thị bố cục khác nhau tùy thuộc vào kích thước màn hình:

Flex-wrap CSS là gì

Bạn tự chạy code, resize màn hình để xem kết quả nhé:

<!DOCTYPE html>

Flexbox Layout website kiểu mẫu

Flex-wrap CSS là gì
<!DOCTYPE html>

Hỏi Đáp Là gì

Bài Viết Liên Quan

Cơ lực là gì
Cơ lực là gì

Multimedia nghĩa là gì
Multimedia nghĩa là gì

Bị cô lập là gì
Bị cô lập là gì

Phương pháp đối chiếu một chiếu là gì
Phương pháp đối chiếu một chiếu là gì

Mâm xôi đó tiếng anh là gì
Mâm xôi đó tiếng anh là gì

Loại người luôn muốn kiểm soát hay chiếm hữu người khác gọi là gì
Loại người luôn muốn kiểm soát hay chiếm hữu người khác gọi là gì

Cổng Ethernet trên tivi là gì
Cổng Ethernet trên tivi là gì

Đốt xa ngón tay là gì
Đốt xa ngón tay là gì

Mlanh là gì
Mlanh là gì

Tẩy quảng trường là gì
Tẩy quảng trường là gì

Đầu 3 jordan 5 kích thước 7
Đầu 3 jordan 5 kích thước 7

MỚI CẬP NHẬP

Biên giới quốc gia trên biển tiếng anh là gì năm 2024
16 phúts trước . bởi StrongRighteousness
Bài hát còn tuổi nào cho em khánh ly năm 2024
18 phúts trước . bởi CharitableCyclist
Tuổi quý hợi sinh con năm nào thì hợp năm 2024
34 phúts trước . bởi UnmannedDynamics
Chuyển từ cao đẳng lên đại học gọi là gì năm 2024
39 phúts trước . bởi RunningRepository
Bạn có thanh toán bằng quẹt thẻ khi mua sắm năm 2024
1 giờs trước . bởi AliveSchism
Bài tập trắc nghiệm đại số chương 4 lớp 10 năm 2024
1 giờs trước . bởi LosingEnlightenment
Hàng ký gửi máy bay là gì năm 2024
1 giờs trước . bởi KhakiSinking
Chiều cao tối thiểu thi vietnamnext top model năm 2024
1 giờs trước . bởi SilkenHeadcount
Nhà máy lọc hóa dầu nghi sơn ten tieng anh năm 2024
2 giờs trước . bởi DogmaticDepletion
Kiểm tra card màn hình laptop có bị lỗi năm 2024
2 giờs trước . bởi MacabreDiscovery

Xem Nhiều

Người bị tai nạn giao thông tiếng anh là gì năm 2024
2 ngàys trước . bởi BridalSnapshot
Miễn đóng dấu trên hóa đơn điện tử năm 2024
6 ngàys trước . bởi BelligerentPersona
Các bài viết ngu văn của kì thi đại học năm 2024
3 ngàys trước . bởi StarryShopping
Bài tập và lời giả ké toán hợp tác xã năm 2024
1 tuầns trước . bởi PunishingOriginality
Lợi nhuận trên vốn cổ phần là gì năm 2024
6 ngàys trước . bởi GlitteringMobility
Giải phiếu bài tập cuối tuần lớp 5 tuần 21 năm 2024
5 ngàys trước . bởi BlearyCloseness
Còn nhỏ tiếng anh là gì năm 2024
2 ngàys trước . bởi AnnouncedNervousness
Lỗi không chơi được game candy crush saga trên facebook năm 2024
1 ngàys trước . bởi MysteriousAggression
Ngày 13 tháng 12 là cung gì năm 2024
1 ngàys trước . bởi StaunchScissors
Viêm tuyến tiền liệt là gì năm 2024
2 ngàys trước . bởi UnforgivableRefinery

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.