Hướng dẫn justify-content css là gì

Căn chỉnh có lẽ là khía cạnh khó hiểu nhất của flexbox. Mô-đun flexbox layout có một số thuộc tính căn chỉnh hành xử khác nhau trong các trường hợp khác nhau và khi sử dụng chúng, có thể bạn không nhất thiết phải hiểu những gì đang xảy ra hoặc tại sao. Tuy nhiên, nếu bạn biết phải lưu ý điều gì, việc căn chỉnh sẽ ít phức tạp hơn so với lần đầu tiên. Hướng dẫn này sẽ giúp bạn hiểu căn chỉnh flexbox một cách hoàn chỉnh.

Nội dung chính Show

Câu chuyện về hai Trục toạ độ
Bắt đầu bằng cách xác định trục chính
1. Left to Right: row
2. Right to Left: row-reverse
3. Top to Bottom: column
4. Bottom to Top: column-reverse
Flex-flow Shorthand
Thuộc tính căn chỉnh Flexbox
Căn chỉnh dọc theo trục chính
Căn dọc theo trục dọc
Căn chỉnh một dòng
Căn chỉnh nhiều dòng
Justify item là gì?
Space Evenly là gì?
Flex row là gì?

Câu chuyện về hai Trục toạ độ

Khi sử dụng flexbox chúng ta làm việc với hai trục: trục chính (main) và trục dọc (cross). Như tên gọi của chúng, các trục này tạo thành một mối quan hệ phân cấp, trục chính nằm trên trục dọc.

Trục dọc luôn vuông góc với trục chính.

Mối quan hệ phân cấp này tạo nên sự khác biệt chính giữa flexbox và CSS Grid Layout. Theo thiết kế, CSS Grid có hai trục không phân cấp: trục hàng (row) và trục cột (column). Điều này là do những người tạo ra các tiêu chuẩn web dự định CSS Grid sẽ được sử dụng như là một mô hình bố cục hai chiều. Mặt khác, Flexbox có một trục chính và một trục phụ, vì mục đích của nó là mô hình bố cục một chiều. Phần thú vị của flexbox là bạn có thể xác định hướng của một chiều bằng cách thiết lập vị trí của trục chính, do đó bạn có thể tạo cả bố cục dựa trên hàng và dựa trên cột.

Để tránh bị nhầm lẫn bởi các thuộc tính căn chỉnh, hãy luôn nhớ rằng khi bạn sử dụng flexbox, bạn đang làm việc với mô hình một chiều. Ngay cả khi bố cục của bạn trông giống như có hai chiều (nghĩa là hàng và cột), các phần tử flex chỉ có thể chảy theo một hướng, dọc theo trục chính. Bạn có thể dàn các phần tử flex theo một hướng đó và căn chỉnh khoảng cách giữa các phần tử riêng lẻ dọc theo trục dọc.

Bắt đầu bằng cách xác định trục chính

Hướng của trục chính được xác định bởi thuộc tính flex-direction có thể có bốn giá trị:

```
      <div class="item item-3">3</div>
```
2 – trục chính chạy từ trái sang phải (mặc định)
```
      <div class="item item-3">3</div>
```
3 – trục chính chạy từ phải sang trái
```
      <div class="item item-3">3</div>
```
4 – trục chính chạy từ trên xuống dưới
```
      <div class="item item-3">3</div>
```
5 – trục chính chạy từ dưới lên trên

Hãy xem điều này trông như thế nào trong trình duyệt. Tôi sẽ sử dụng mã HTML rất đơn giản, chỉ chín hộp xếp chồng lên nhau:

<div class="container">

      <div class="item item-1">1</div>

      <div class="item item-2">2</div>

      <div class="item item-3">3</div>

      <div class="item item-4">4</div>

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

<div class="container">

Div bên ngoài với lớp

      <div class="item item-3">3</div>

6 sẽ là thùng chứa flex và div bên trong với lớp

      <div class="item item-3">3</div>

7 sẽ là các phần tử flex.

1. Left to Right: row

Như đã đề cập, hướng flex mặc định là

      <div class="item item-3">3</div>

8; nếu bạn không thiết lập gì khác thì đây sẽ là giá trị được sử dụng. Như bạn có thể thấy bên dưới, tôi chỉ thêm các thuộc tính liên quan đến flexbox vào thùng chứa flex. Các phần tử flex đã áp dụng một số thuộc tính với mục đích trang trí:

      <div class="item item-1">1</div>

Khi

      <div class="item item-3">3</div>

9 là

      <div class="item item-3">3</div>

8, trục chính chạy theo chiều ngang, từ trái sang phải. Do đó, đây là hướng mà theo đó các phần tử flex được bố trí. Trục dọc chạy vuông góc, từ trên xuống dưới và khi các phần tử bao bọc chúng làm theo hướng này.

2. Right to Left: row-reverse

Khi flex-direction được gán giá trị

1, vị trí của các trục vẫn giữ nguyên, có nghĩa là trục chính vẫn sẽ chạy theo chiều ngang và trục dọc theo chiều dọc. Tuy nhiên, hướng hàng sẽ bị đảo ngược: từ phải sang trái dọc theo trục chính.

      <div class="item item-1">1</div>

      <div class="item item-1">1</div>

Nếu bạn nhìn vào số thứ tự của các phần tử flex bạn có thể thấy bây giờ, mỗi hàng được đánh số từ phải sang trái, nhưng các phần tử vẫn bao bọc theo chiều dọc trở xuống.

Nếu bạn cũng muốn đảo ngược hướng của trục dọc, bạn cần sử dụng

2 thuộc tính

3. Lưu ý sự khác biệt:

3. Top to Bottom: column

Khi

      <div class="item item-3">3</div>

9 là

5, trục chính và trục dọc thay đổi vị trí của chúng. Trục chính sẽ chạy theo chiều dọc (từ trên xuống dưới) và trục dọc sẽ chạy theo chiều ngang (từ trái sang phải).

      <div class="item item-2">2</div>

<div class="container">

      <div class="item item-1">1</div>

Bây giờ bạn sẽ thấy các phần tử flex không chạy theo hàng nữa, mà là theo cột. Đây là nơi mà bản chất một chiều của flexbox có lẽ là dễ thấy nhất. Các phần tử sẽ chỉ bị bao bọc nếu thùng chứa được thiết lập một chiều cao cố định.

4. Bottom to Top: column-reverse

Tôi hy vọng bạn có thể nhìn thấy một mô hình phát triển ở đây. Khi

      <div class="item item-3">3</div>

9 được thiết lập thành

7, trục chính vẫn thẳng đứng và trục dọc vẫn nằm ngang, giống như chúng ta đã thấy trong ví dụ trước. Tuy nhiên, hướng cột được đảo ngược để trục chính trỏ từ dưới lên trên.

      <div class="item item-2">2</div>

<div class="container">

      <div class="item item-1">1</div>

Như bạn có thể thấy bên dưới, số các phần tử flex bắt đầu ở phía dưới bên trái, di chuyển lên trên và sang phải.

Một lần nữa, để thay đổi hướng của trục dọc, bạn cần sử dụng

2 trên thuộc tính

Flex-flow Shorthand

Thuộc tính

      <div class="item item-4">4</div>

0 là một shorthand cho

      <div class="item item-3">3</div>

9 và

3. Chẳng hạn, bạn có thể sử dụng:

thay vì:

      <div class="item item-3">3</div>

Thuộc tính căn chỉnh Flexbox

Căn chỉnh Flexbox có thể xảy ra dọc theo cả trục chính và trục dọc.

Một trong các thuộc tính (

      <div class="item item-4">4</div>

3) thuộc về trục chính, trong khi ba thuộc tính khác (

      <div class="item item-4">4</div>

      <div class="item item-4">4</div>

      <div class="item item-4">4</div>

6) thuộc về trục dọc.

Như bạn có thể kỳ vọng, hành vi của các thuộc tính căn chỉnh phụ thuộc vào thuộc tính flex-direction. Ví dụ,

      <div class="item item-4">4</div>

3 canh chỉnh các phần tử theo chiều ngang nếu

      <div class="item item-3">3</div>

9 là

      <div class="item item-3">3</div>

8 hoặc

1, nhưng theo chiều dọc nếu

      <div class="item item-3">3</div>

9 là

5 hoặc

7. Đây là vẻ đẹp thật sự của flexbox.

Căn chỉnh dọc theo trục chính

Thuộc tính justify-content sắp xếp các phần tử flex trong thùng chứa flex dọc theo trục chính. Nó phân phối khoảng trống còn lại sau khi trình duyệt đã tính không gian cần thiết cho tất cả các phần tử trong thùng chứa flex. Thuộc tính justify-content có thể có năm giá trị:

```
<div class="container">
```
04 - các phần tử flex được giãn ra theo hướng bắt đầu của trục chính (đây là mặc định)
```
<div class="container">
```
05 - Các phần tử flex được giãn ra ở cuối của trục chính
```
<div class="container">
```
06 - các phần tử flex được giãn ở xung quanh tâm của trục chính
```
<div class="container">
```
07 - các phần tử flex được phân bổ đều nhau dọc theo trục chính, từ flex-start đến flex-end
```
<div class="container">
```
08 - các phần tử flex được phân bổ đều dọc theo trục chính, nhưng nửa khoảng trống được thêm vào mỗi đầu

Để sử dụng

      <div class="item item-4">4</div>

3 đúng cách, bạn cần chú ý đến các hướng của trục. Chẳng hạn,

<div class="container">

10 luôn luôn dồn các phần tử flex vào đầu trục chính. Đây là đầu bên trái khi flex-direction là

      <div class="item item-3">3</div>

8, đầu bên phải khi nó là

1, điểm cao nhất khi nó là

5 và điểm dưới cùng khi là

Pen sau đây cho thấy các giá trị khác nhau của thuộc tính

      <div class="item item-4">4</div>

3 căn chỉnh các phần tử flex khi flex-direction là

      <div class="item item-3">3</div>

Căn dọc theo trục dọc

Đây là lúc để nâng mọi thứ lên cấp độ tiếp theo. Bạn có thể sử dụng ba thuộc tính CSS để căn chỉnh các phần tử dọc theo trục dọc. Hai trong số chúng (

      <div class="item item-4">4</div>

4 và

      <div class="item item-4">4</div>

5) dành cho căn chỉnh một dòng, trong khi

      <div class="item item-4">4</div>

6 là để căn chỉnh nhiều dòng.

Căn chỉnh một dòng

Các thuộc tính

      <div class="item item-4">4</div>

4 và

      <div class="item item-4">4</div>

5 xác định khoảng không gian giữa các phần tử flex dọc theo trục dọc. Trong thực tế, cả hai đều tương tự, nhưng trong khi

      <div class="item item-4">4</div>

4 sẽ căn chỉnh tất cả các phần tử bên trong thùng chứa flex,

      <div class="item item-4">4</div>

5 sẽ ghi đè căn chỉnh mặc định này cho các phần tử flex riêng lẻ.

Cả hai đều có thể nhận các giá trị sau:

```
<div class="container">
```
24 - làm cho thuộc tính align-self kế thừa giá trị của align-items (mặc định cho align-self)
```
<div class="container">
```
04 - các phần tử flex được căn chỉnh theo hướng bắt đầu của trục dọc
```
<div class="container">
```
05 - các phần tử flex được căn chỉnh về phía cuối trục dọc
```
<div class="container">
```
06 - các phần tử flex được căn chỉnh xung quanh tâm của trục dọc
```
<div class="container">
```
28 - các phần tử flex được căn chỉnh sao cho việc căn chỉnh baseline của chúng thẳng hàng
```
<div class="container">
```
29 - các phần tử flex được kéo dài dọc theo trục chéo để lấp đầy hộp chứa flex (mặc định cho align-items)

Pen bên dưới cho thấy các thuộc tính

      <div class="item item-4">4</div>

4 và

      <div class="item item-4">4</div>

5 hành xử khi

      <div class="item item-3">3</div>

9 là row. Trục dọc theo mặc định chạy từ trên xuống dưới. Các phần tử có padding khác nhau để thay đổi chiều cao và đường cơ sở của chúng. Ví dụ, bạn có thể thấy giá trị

<div class="container">

04 căng thẳng hàng các phần tử với điểm bắt đầu của trục dọc, trong khi

<div class="container">

05 căn thẳng hàng chúng đến cuối.

Về bản chất, khi

      <div class="item item-3">3</div>

9 là

5 hoặc

7, bạn đang làm việc với một bố cục dựa trên cột do đó

      <div class="item item-4">4</div>

4 và

      <div class="item item-4">4</div>

5 sẽ căn chỉnh các phần tử theo chiều ngang.

Căn chỉnh nhiều dòng

Thuộc tính align-content giúp căn chỉnh nhiều dòng có thể dọc theo trục dọc. Nó xác định cách các phần tử flex trên nhiều dòng được đặt cách nhau. Thuộc tính align-content không có tác dụng đối với kho chứa flex một dòng (ví dụ: khi nội dung không wrap). Nó có thể nhận sáu giá trị khác nhau:

```
<div class="container">
```
04 - các phần tử flex được căn chỉnh theo điểm bắt đầu của trục dọc
```
<div class="container">
```
05 - các phần tử flex được căn chỉnh đến cuối trục dọc
```
<div class="container">
```
06 - các phần tử flex được căn chỉnh xung quanh tâm của trục dọc
```
<div class="container">
```
07 - các phần tử flex được phân phối đều dọc theo trục dọc, giữa flex-start và flex-end
```
<div class="container">
```
08 - các phần tử flex được phân phối đều dọc theo trục dọc, nhưng nửa khoảng trống được thêm vào mỗi đầu
```
<div class="container">
```
29 - các phần tử flex được kéo dài dọc theo trục dọc để lấp đầy hộp chứa flex (đây là mặc định)

Dưới đây, bạn có thể thấy các pen khác nhau cho thấy các giá trị khác nhau của thuộc tính

      <div class="item item-4">4</div>

6 hoạt động như thế nào. Cũng như với các bản demo khác của chúng tôi, hướng trục mặc định được áp dụng.

Hai ví dụ đầu tiên không có một thuộc tính một dòng (

      <div class="item item-4">4</div>

4) được xác định, do đó, bạn sẽ nhận thấy tất cả các phần tử được kéo dài theo mặc định. Trong ví dụ tiếp theo này, chúng tôi sẽ thiết lập

<div class="container">

48 sao cho các phần tử được căn chỉnh theo hướng bắt đầu của trục dọc, nhưng chúng ta sẽ thiết lập

<div class="container">

49 sao cho nội dung được căn chỉnh về phía cuối trục:

Nếu bạn đã nắm rõ được mọi thứ mà chúng ta đã tìm hiểu qua, thì bạn đã làm rất tốt! Bây giờ bạn đã có một sự hiểu biết cơ bản vững chắc về căn chỉnh flexbox.

Justify item là gì?

justify-items và align-items dùng để căn chỉnh các nội dung của 1 item, chúng ta muốn căn chỉnh toàn bộ nội dung thì sẽ cần phải sử dụng đến 2 properties khá mạnh mẽ là justify-content và align-content, 2 thuộc tính này còn kết hợp rất tốt khi sử dụng vs bố cục theo flex, Đối với justify-content và align-content thì sẽ ...

Flex

flex-direction Thuộc tính này quy định cách trình bày các mục linh hoạt trong khung linh hoạt, bằng cách đặt hướng cho khung linh hoạt theo một trục chính. Chúng có thể được trình bày theo hai hướng, giống như hàng ngang hay hàng dọc.

Space Evenly là gì?

space-evenly : chia sẻ đều khoảng cách giữa item và item, item với main start và main end.

Flex row là gì?

Cụ thể: flex-direction: row: Chuyển trục main axis thành chiều ngang, nghĩa là hiển thị theo hàng. colum: Chuyển trục main axis thành chiều dọc, nghĩa là hiển thị theo cột. row-reverse: Hiển thị theo hàng nhưng đảo ngược vị trí các item.