Justify-itemstrong css

Ở 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 xóa float hay đặt các vị trí 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ệ

Nhưng thật may rủi, 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 mã. Vậy chúng ta cùng nhau tìm hiểu xem Flexbox là gì và lý do tại sao nó lại mạnh mẽ như vậy?

Flexbox là gì?

Bố cục Flexbox (hay còn gọi là Hộp linh hoạt) 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ự tất cả các phần bên trong để phù hợp với tất cả các loại thiết bị hiển thị

Với bố cục thông thường, bạn cần thiết lập kích thước của phần tử, thiết lập hiển thị ở dạng khối hoặc nội tuyến, cho nó nổi, còn với Flexbox bạn chỉ cần thiết lập phần hiển thị theo chiều ngang hoặc chiều dọc, lúc đó

Lưu ý. Flexbox Layout phù hợp nhất để thiết lập bố cục cục bộ ở quy mô nhỏ, còn thiết lập bố cục cục bộ 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 (bố cục lưới)

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

Bố cục linh hoạt được thiết lập từ một khung lớn (khung chứa chính) đóng vai trò là khung linh hoạt (bộ chứa linh hoạt) và các thẻ con ngay trong nó (con ngay lập tức) đóng vai trò của các mục linh hoạt nhỏ (mục linh hoạt)

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

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

• thùng đựng hàng. is thành phần lớn bao quanh các phần tử bên trong, các mục bên trong sẽ hiển thị dựa trên thiết lập của vùng chứa này
• mục . là phần tử con của vùng chứa, bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một vùng chứa, hoặc thiết lập thứ tự hiển thị của nó

Các mục sẽ được bố trí theo trục chính của trục (bắt đầu từ main-start, kết thúc ở main-end) hoặc theo trục ngang của trục (bắt đầu từ cross-start, kết thúc ở cross-end)

• trục chính. đây là trục chính để điều khiển hướng mà các mục sẽ hiển thị. Lưu ý, trục chính 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à khi đó các mục sẽ hiển thị theo nó
• khởi động chính. đầu cuối. khi thiết lập flexbox, các mục nằm trong vùng chứa hiển thị từ điểm bắt đầu cuộc gọi là main-start đến điểm kết thúc cuộc gọi là main-end
• kích thước chính. size (chiều rộng hoặc chiều cao) của các mục, tùy thuộc vào hướng của trục chính
• trục chéo. trục chéo luôn là góc góc của trục chính. Hướng của nó phụ thuộc vào hướng của trục chính
• bắt đầu chéo. đầu cuối. có ý nghĩa tương tự nhưng luôn vuông góc với điểm bắt đầu chính, điểm kết thúc chính
• kích thước chéo. size (chiều rộng hoặc chiều cao) của các mục dựa trên trục chéo của hệ thống, tùy thuộc vào hướng của trục chính

  3 điều bạn không thể biết về biến trong CSS

  5 điều kiện khó chịu nhất của CSS

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

trưng bày

Để sử dụng flex trong css thì menu đơn giản là chúng ta chỉ cần khai báo thuộc tính hiển thị. uốn cong

.container {   display: flex; /* hoặc inline-flex */ }

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

hướng uốn

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

cú pháp

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

Các tham số

• chèo thuyền. mặc định, mục linh hoạt được sắp xếp theo chiều ngang, từ trái qua phải (trục chính nằm ngang)
• đảo ngược hàng. mục linh hoạt được sắp xếp theo chiều ngang, từ phải qua trái (trục chính nằm ngang)
• cột. mục flex được sắp xếp theo chiều dọc, từ trên xuống dưới (trục chính theo chiều dọc)
• đảo ngược cột. mục linh hoạt được sắp xếp theo chiều dọc, từ dưới lên trên (trục chính theo chiều dọc)

Ví dụ

.flex-container {   display: flex;   flex-direction: row; }

.flex-container {   display: flex;  flex-direction: row-reverse; }

.flex-container {   display: flex;  flex-direction: column; }

.flex-container {   display: flex;  flex-direction: column-reverse; }

Mã đầy đủ.

<!DOCTYPE html> <html> <head> <style> .flex-container {   display: flex;   flex-direction: column;   background-color: #e9d8f4; } .flex-container > div {   background-color: #58257b;   width: 100px;   margin: 10px;   color: white;   text-align: center;   line-height: 75px;   font-size: 30px; } </style> </head> <body> <h1>Thuộc tính flex-direction</h1> <div class="flex-container">   <div>1</div>   <div>2</div>   <div>3</div>  </div> </body> </html>

uốn dẻo

Theo mặc định, mục 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ó thay đổi kích thước trình duyệt theo kích thước bất kỳ, điều này dễ dàng làm cho nội dung bên trong (nếu có) bị giãn hay

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

cú pháp

.container{    flex-wrap: nowrap | wrap | wrap-reverse;  }

Tham số

• bây giờ. default, all items will be on a line
• bọc. khi kích thước vùng chứa thay đổi và tổng chiều rộng các mục được cộng lại lớn hơn chiều rộng của vùng chứa thì mục đó sẽ tự động di chuyển xuống dòng
• bọc ngược. future as wrap, but instead because down line, item will jump up on

Ví dụ

.flex-container {   display: flex;  flex-wrap: nowrap; }

.flex-container {   display: flex;  flex-wrap: wrap; }

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

Chạy mã sau đó thử thay đổi kích thước trình duyệt để biết rõ sự khác biệt hơn .

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

dòng chảy linh hoạt

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

cú pháp

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

Ví dụ

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

biện minh cho nội dung

Theo mặc định, các mục bên trong sẽ bắt đầu từ main start đến main end, tuy nhiên, double when 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à điều chỉnh các mục bên trong vùng chứa theo dọc theo trục chính của trục, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction

cú pháp

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

Các tham số

• khởi động linh hoạt. default value, item will started from the main-start của vùng chứa
• kết thúc uốn cong. mục sẽ bắt đầu từ bên chính đầu cuối của vùng chứa ( other with row-reverse is reversion display)
• trung tâm. item will be between container
• không gian giữa. các mục 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, mục đầu tiên sát biên chứa điểm chính-bắt đầu, mục cuối cùng sát biên chứa điểm chính-end
• không gian xung quanh. space-between tương tự, but other at place is each item have the way 2 side by side and the other distance by nhau
• không gian đều. các mặt hàng được phân phối sao cho khoảng cách giữa hai mặt hàng bất kỳ, giữa mặt hàng và các mặt hàng là bằng nhau

Ví dụ. Main axis at here is going to ngang

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

.container {    flex-direction: row | row-reverse | column | column-reverse;  }

.flex-container {   display: flex;   flex-direction: row; }

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

.flex-container {   display: flex;   flex-direction: row; }

sắp xếp các mục

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 mục bên trong vùng chứa theo trục dọc theo trục ngang, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction

cú pháp

.flex-container {   display: flex;   flex-direction: row; }

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

kéo dài. giá trị mặc định, các phần tử sẽ được kéo dài để lấp đầy vùng chứa chứa nó, nhưng sẽ ưu tiên giá trị chiều cao/chiều rộng nếu có, khi mục đó sẽ không cao đầy đủ mà chỉ lấy giá trị chiều cao/chiều rộng mà bạn đã đặt

.flex-container {   display: flex;   flex-direction: row; }

khởi động linh hoạt. mục sẽ bắt đầu từ dấu bắt đầu chéo của vùng chứa

Ví dụ trường hợp mặc định với trục chính nằm ngang, trục ngang đứng dọc, hướng uốn. hàng thì các mục sẽ bắt đầu từ trên

.flex-container {   display: flex;   flex-direction: row; }

kết thúc uốn cong. item will started from the cross-end of container. Default field with cross axis vertical, flex-direction. row, item will go to bottom

.flex-container {   display: flex;   flex-direction: row; }

trung tâm. mục sẽ căn giữa theo chiều của trục chéo

.flex-container {   display: flex;   flex-direction: row; }

đường cơ sở. mục đượ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 phông chữ khác nhau để thấy rằng các mục được căn chỉnh theo đường cơ sở của cơ sở

.flex-container {   display: flex;   flex-direction: row; }

Mã đầy đủ, thay thế các giá trị để biết rõ hơn

.flex-container {   display: flex;   flex-direction: row; }

căn chỉnh nội dung

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

cú pháp

.flex-container {   display: flex;   flex-direction: row; }

Các tham số

.flex-container {   display: flex;  flex-direction: row-reverse; }

.flex-container {   display: flex;  flex-direction: row-reverse; }

.flex-container {   display: flex;  flex-direction: row-reverse; }

.flex-container {   display: flex;  flex-direction: row-reverse; }

.flex-container {   display: flex;  flex-direction: row-reverse; }

.flex-container {   display: flex;  flex-direction: row-reverse; }

Mã đầy đủ.

.flex-container {   display: flex;  flex-direction: row-reverse; }

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

gọi món

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

cú pháp

.flex-container {   display: flex;  flex-direction: row-reverse; }

Ví dụ

.flex-container {   display: flex;  flex-direction: row-reverse; }

uốn cong

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

cú pháp

.flex-container {   display: flex;  flex-direction: row-reverse; }

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

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

Khi ta tăng flex-grow = 1, mục sẽ tự động giãn ra sao cho phù hợp với khung chứa

Giá trị của flex-grow rất linh động, khi đặt thuộc tính này cho tất cả các mặt hàng với cùng một giá trị thì các mặt hàng sẽ có tỷ lệ giống nhau và được dàn đều cho đầy thùng chứa. Ví dụ đặt tất cả các phần tử flex-grow là 1 thì tất cả đều giống nhau như tỷ lệ 1. 1, which set flex-grow is 100, the result is will out future with the ratio 1. 1

Nhưng điều thú vị hơn ở flex-grow là áp dụng nó cho từng mục. Ta has default value at all the element is flex-grow = 0, change private value of item2 to 1, results as after

Vì vậy, ở đây, thiết lập flex-grow là 1, 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ử chọn các phần tử đều là flex-grow. 1, nhưng đặt giá trị khác cho phần tử thứ 3

Lúc này thì tất cả các mục đều được giãn ra để lấp đầy phần trống của vùng chứa, nhưng mục3 có flex-grow. 3 sẽ được thừa hưởng nhiều phần trống hơn các mục còn lại chỉ có flex-grow. 1, tool can be better than interval 3 times. Và như đã đề cập ở trên, thuộc tính flex-grow làm cho các tỷ lệ phần tử tương ứng 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

You order change the values ​​to better

.flex-container {   display: flex;  flex-direction: column; }

uốn cong

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à co lại khi chúng ta thay đổi độ rộng của vùng chứa

cú pháp

.flex-container {   display: flex;  flex-direction: column; }

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 mở rộng vùng chứa xuống. Nếu flex-co lại. 0 thì mục sẽ không co giãn mà lấy nguyên giá trị của thuộc tính chiều rộng/chiều cao

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

Thay đổi kích thước cửa sổ duyệt lại, item3 co lại nhiều hơn

cơ sở linh hoạt

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

cú pháp

.flex-container {   display: flex;  flex-direction: column; }

Nếu bạn xác định độ dài chung của mục lớp là 100px nhưng tùy chỉnh mục3 với cơ sở linh hoạt. 250px thì ta sẽ được như sau

uốn cong

Thuộc tính flex sử dụng cho khu vực chung ba thuộc tính flex-grow, flex-shrink và flex-basis

cú pháp

.flex-container {   display: flex;  flex-direction: column; }

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

.flex-container {   display: flex;  flex-direction: column; }

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

.flex-container {   display: flex;  flex-direction: column; }

default value of flex is

.flex-container {   display: flex;  flex-direction: column; }

Lưu ý

• If property only has an number of this. uốn cong. 1;
• If property only have a tham số có đơn vị độ dài như thế này. uốn cong. 250px;
• Nếu thuộc tính có hai tham số thế này. uốn cong. 1 250px;
• Nếu thuộc tính có hai tham số thế này. uốn cong. 1 2;

tự sắp xếp

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

.flex-container {   display: flex;  flex-direction: column; }

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 giữa nhờ align-items. center as after

Bạn có thể căn chỉnh các mục theo ý thích, mục1 nằm trên cùng, mục3 thì phải kéo giãn chiều dài ra và mục5 thì phải nằm dưới cùng, hãy sử dụng align-self để đặt lại các vị trí

.flex-container {   display: flex;  flex-direction: column; }

Tạo thư viện ảnh bằng Flexbox

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