Trung tâm căn chỉnh thẻ phản ứng-bootstrap

Căn chỉnh có thể là khía cạnh khó hiểu nhất của flexbox. Bố cục mô-đun flexbox có một số thuộc tính căn bản điều chỉnh hành động xử lý khác nhau trong các trường hợp khác nhau và khi sử dụng chúng, có thể bạn không nhất thiết phải hiểu những gì đang xảy ra hoặc tại sao. Tuy nhiên, nếu bạn biết phải lưu ý điều gì, việc điều chỉnh căn bản sẽ ít phức tạp hơn so với lần đầu tiên. Hướng dẫn này sẽ giúp bạn hiểu căn bản điều chỉnh flexbox một cách hoàn chỉnh

Câu chuyện về hai trục tốc độ

Khi sử dụng flexbox chúng ta làm việc với hai trục. trục chính (chính) và trục dọc (chéo). Như tên gọi của chúng, các trục này tạo thành một mối quan hệ phân cấp, trục chính nằm trên trục dọc

Trục dọc luôn góc với trục chính

Mối quan hệ phân cấp này tạo nên sự khác biệt chính giữa flexbox và CSS Grid Layout. Theo thiết kế, CSS Grid có hai thành phần không phân cấp. trục hàng (hàng) và cột cột (cột). Điều này là để những người tạo ra các tiêu chuẩn web dự kiến ​​CSS Grid sẽ được sử dụng như một mô hình bố cục cục bộ hai chiều. Mặt khác, Flexbox có một trục chính và một trục phụ, vì đích đến của nó là một mô hình bố cục cục bộ. Phần thú vị của flexbox là bạn có thể xác định hướng của một chiều bằng cách thiết lập vị trí của trục chính, do đó bạn có thể tạo cả bố cục cục bộ dựa trên hàng và dựa trên cột

Để tránh bị nhầm lẫn do các thuộc tính căn bản chỉnh sửa, hãy luôn nhớ rằng khi bạn sử dụng flexbox, bạn đang làm việc với mô hình một chiều. Ngay cả khi bố cục cục bộ của bạn trông giống như có hai chiều (nghĩa là hàng và cột), các phần tử linh hoạt chỉ có thể chảy theo một hướng, dọc theo trục chính. Bạn có thể dàn các phần tử linh hoạt theo một hướng đó và căn chỉnh khoảng cách giữa các phần tử riêng lẻ dọc theo trục dọc

Bắt đầu bằng cách xác định thành phần chính

Hướng của trục chính được xác định bởi thuộc tính flex-direction có thể có các giá trị

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

   0 – main run from left sang must (default)
   

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

   1 – main run from must sang left

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

   2 – trục chính chạy từ trên xuống dưới

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

   0 – main run from bottom up on

Vui lòng xem điều này trông như thế nào trong trình duyệt. Tôi sẽ sử dụng mã HTML rất đơn giản, chỉ chín hộp xếp chồng lên nhau

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

Div bên ngoài với lớp

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

1 sẽ là thùng chứa flex và div bên trong lớp

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

2 sẽ là các phần tử linh hoạt

1. trái sang phải. hàng ngang

Như đã đề cập, hướng flex mặc định là

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

3; . Nếu bạn có thể thấy bên dưới, tôi chỉ thêm các thuộc tính liên quan đến flexbox vào thùng chứa flex. Phần tử linh hoạt đã được áp dụng một số thuộc tính cho mục đích trang trí

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

Khi

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

4 là

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

3, trục chính chạy theo chiều ngang, từ trái sang phải. Do đó, đây là hướng mà theo đó các phần tử linh hoạt được bố trí. Trục dọc chạy theo góc, từ trên xuống dưới và khi các phần tử bao bọc chúng làm theo hướng này

2. Phải sang trái. đảo ngược hàng

Khi hướng uốn được gán giá trị

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

6, vị trí của các trục vẫn được giữ nguyên, có nghĩa là trục chính vẫn sẽ chạy theo chiều ngang và trục dọc theo chiều dọc. Tuy nhiên, hướng hàng sẽ bị đảo ngược. from must to left vertical by main

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

Nếu bạn nhìn vào thứ tự của các phần tử linh hoạt, bạn có thể thấy bây giờ, mỗi hàng được đánh số từ phải sang trái, nhưng các phần tử vẫn được bao bọc theo chiều dọc trở xuống

Nếu bạn cũng muốn đảo ngược hướng của dọc trục, bạn cần sử dụng thuộc tính

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

7 của

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

8. Save the other note

3. Từ trên xuống dưới. cột

Khi

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

4 là

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

0, trục chính và trục dọc thay đổi vị trí của chúng. Trục chính sẽ chạy theo chiều dọc (từ trên xuống dưới) và trục dọc sẽ chạy theo chiều ngang (từ trái sang phải)

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

4

Bây giờ bạn sẽ thấy các phần tử flex không chạy theo hàng nữa, mà là theo cột. Đây là nơi mà bản chất một chiều của flexbox có thể dễ dàng tìm thấy nhất. Các phần tử sẽ chỉ được bao bọc nếu thùng chứa được thiết lập một chiều cố định cao

4. Dưới lên trên. đảo ngược cột

Tôi hy vọng bạn có thể nhìn thấy một mô hình phát triển ở đây. Khi

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

4 được thiết lập thành

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

2, trục chính vẫn thẳng đứng và trục dọc vẫn nằm ngang, giống như chúng ta đã thấy trong ví dụ trước. Tuy nhiên, hướng cột đã được đảo ngược để trục chính con trỏ từ dưới lên trên

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

7

Như bạn có thể thấy bên dưới, số phần tử flex bắt đầu ở bên dưới bên trái, di chuyển lên trên và sang phải

Một lần nữa, để thay đổi hướng của trục dọc, bạn cần sử dụng

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

7 trên thuộc tính

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

8

Tốc ký dòng chảy linh hoạt

Thuộc tính ________ 95 là viết tắt của ________ 04 và _______ 08. Khoảng thời gian giới hạn, bạn có thể sử dụng

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

3

thay vì

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

4

Thuộc tính chỉnh sửa Flexbox

Chỉnh sửa Flexbox có thể xảy ra dọc theo cả trục chính và trục dọc

Một trong các thuộc tính (

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

8) thuộc về trục chính, trong khi thuộc tính khác (

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

9,

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

40,

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

41) thuộc về trục dọc

Như bạn có thể kỳ vọng, hành vi của các thuộc tính căn bản điều chỉnh phụ thuộc vào thuộc tính flex-direction. Ví dụ, 

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

8 canh chỉnh các phần tử theo chiều ngang nếu

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

4 là

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

3 hoặc

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

6, nhưng theo chiều dọc nếu

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

4 là

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

0 hoặc

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

2. Đây là vẻ đẹp thực sự của flexbox

Căn chỉnh dọc theo trục chính

Thuộc tính justify-content sắp xếp các phần tử flex trong thùng chứa flex dọc theo trục chính. Khoảng trống được phân phối còn lại sau khi trình duyệt đã được tính toán không gian cần thiết cho tất cả các phần tử trong thùng chứa flex. Thuộc tính justify-content có thể có giá trị theo năm

1. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   49 - các phần tử flex được giãn ra theo hướng bắt đầu của trục chính (ở đây là mặc định)
   

2. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   70 - Các phần tử flex được thư giãn ở cuối phần chính
   

3. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   71 - các phần tử linh hoạt được giãn ra xung quanh tâm của phần chính
   

4. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   72 - các phần tử flex được phân bổ đều nhau dọc theo trục chính, từ flex-start đến flex-end
   

5. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   73 - các phần tử linh hoạt được bổ sung dọc theo trục chính, nhưng các khoảng trống giữa các khoảng trống được thêm vào mỗi đầu

Để sử dụng

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

8 đúng cách, bạn cần chú ý đến các hướng của bộ phận. Hạn chế,

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

75 luôn luôn điều hành các phần tử linh hoạt vào đầu trục chính. Đây là đầu bên trái khi flex-direction là

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

3, đầu bên phải khi nó là

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

6, điểm cao nhất khi nó là

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

0 và điểm dưới cùng khi là

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

2

Bút sau đây cho thấy các giá trị khác nhau của thuộc tính

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

8 căn chỉnh các phần tử flex khi flex-direction là

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

3

Sắp xếp theo chiều dọc

Đây là lúc để nâng cấp mọi thứ theo cấp độ tiếp theo. Bạn có thể sử dụng ba thuộc tính CSS để chỉnh sửa các phần tử dọc theo trục dọc. Hai trong số chúng (_______ 99 và _______ 140) dành cho căn chỉnh một dòng, trong khi

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

41 là để căn chỉnh nhiều dòng

Căn chỉnh một dòng

Các thuộc tính _______ 99 và _______ 140 xác định khoảng cách không gian giữa các phần tử flex dọc theo trục dọc. Trong thực tế, cả hai đều tương tự, nhưng khi

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

9 sẽ căn chỉnh tất cả các phần tử bên trong thùng chứa flex, thì

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

40 sẽ ghi lại việc chỉnh sửa mặc định này cho các phần tử linh hoạt riêng lẻ

Cả hai đều có thể nhận các giá trị sau

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

   39 - làm cho thuộc tính align-self kế thừa giá trị của align-items (mặc định cho align-self)
   

2. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   49 - các phần tử linh hoạt được căn chỉnh theo hướng bắt đầu của trục dọc
   

3. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   70 - các phần tử linh hoạt được căn chỉnh về phía cuối trục dọc
   

4. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   71 - các phần tử linh hoạt được căn chỉnh xung quanh tâm của trục dọc
   

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

   43 - các phần tử linh hoạt được căn chỉnh sao cho công việc căn chỉnh đường cơ sở của chúng thẳng hàng
   

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

   44 - các phần tử flex được kéo dài theo trục chéo để lấp đầy hộp chứa flex (mặc định cho các mục căn chỉnh)
   

Bút bên dưới để thấy các thuộc tính của

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

9 và

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

40 hành động khi

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

4 là hàng. Trục dọc theo mặc định chạy từ trên xuống dưới. Các phần tử có phần đệm khác nhau để thay đổi chiều cao và đường cơ sở của chúng. Ví dụ, bạn có thể thấy giá trị của

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

49 căng thẳng hàng các phần tử với điểm bắt đầu của trục dọc, trong khi

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

70 căn thẳng hàng của chúng đến cuối

Về bản chất, khi 

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

4 là

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

0 hoặc

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

2, bạn đang làm việc với một bố cục dựa trên cột do đó

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

9 và

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

40 sẽ điều chỉnh các phần tử theo chiều ngang

Căn chỉnh nhiều dòng

Thuộc tính align-content giúp căn chỉnh nhiều dòng có thể dọc theo trục dọc. Nó xác định cách các phần tử linh hoạt trên nhiều dòng được đặt cách nhau. Thuộc tính align-content không có tác dụng đối với kho chứa flex một dòng (ví dụ. khi nội dung không bao bọc). Nó có thể nhận sáu giá trị khác nhau

1. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   49 - các phần tử linh hoạt được căn chỉnh theo điểm bắt đầu của trục dọc
   

2. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   70 - các phần tử linh hoạt được căn chỉnh đến cuối trục dọc
   

3. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   71 - các phần tử linh hoạt được căn chỉnh xung quanh tâm của trục dọc
   

4. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   72 - Các phần tử flex được phân bổ đều theo chiều dọc, giữa flex-start và flex-end

5. 
         
   1
         
   2
         
   3
         
   4
         
   5
         
   6
         
   7
         
   8
         
   9
   
   

   73 - Các phần tử linh hoạt được phân phối đều theo chiều dọc, nhưng một nửa khoảng trống được thêm vào mỗi đầu

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

   44 - Các phần tử flex được kéo dài theo chiều dọc để lấp đầy hộp chứa flex (ở đây là mặc định)
   

Dưới đây, bạn có thể thấy các bút khác nhau để xem các giá trị khác nhau của thuộc tính

      
1
      
2
      
3
      
4
      
5
      
6
      
7
      
8
      
9

41 hoạt động như thế nào. Cũng giống như các bản demo khác của chúng tôi, hướng định dạng mặc định được áp dụng

Hai ví dụ đầu tiên không có thuộc tính một dòng (_______99) được xác định, làm như vậy, bạn sẽ nhận thấy tất cả các phần tử được kéo dài theo mặc định. Trong ví dụ tiếp theo này, chúng tôi sẽ thiết lập

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

13 sao cho các phần tử được căn chỉnh theo hướng bắt đầu của trục dọc, nhưng chúng tôi sẽ thiết lập

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

14 sao cho nội dung được căn chỉnh về phía cuối trục

Nếu bạn đã nắm rõ được mọi thứ mà chúng ta đã tìm hiểu qua, thì bạn đã làm rất tốt. Bây giờ bạn đã có một sự hiểu biết về cơ bản chắc chắn về căn chỉnh flexbox