Hướng dẫn dùng stretch draw trong PHP
Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article) Show
Căn chỉnh có lẽ là khía cạnh khó hiểu nhất của flexbox. Mô-đun flexbox layout có một số thuộc tính căn chỉnh hành xử 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 căn chỉnh 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 chỉnh flexbox một cách hoàn chỉnh. Câu chuyện về hai Trục toạ độKhi sử dụng flexbox chúng ta làm việc với hai trục: trục chính (main) và trục dọc (cross). 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. 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 trục không phân cấp: trục hàng (row) và trục cột (column). Điều này là do những người tạo ra các tiêu chuẩn web dự định CSS Grid sẽ được sử dụng như là một mô hình bố cục hai chiều. Mặt khác, Flexbox có một trục chính và một trục
phụ, vì mục đích của nó là mô hình bố cục một chiều. 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 dựa trên hàng và dựa trên cột. Để tránh bị nhầm lẫn bởi các thuộc tính căn chỉnh, 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ủ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ử flex 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ử flex 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 trục chínhHướng của trục chính được xác định bởi thuộc tính flex-direction có thể có bốn giá trị:
Hãy 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:
Div bên ngoài với lớp 1. Left to Right: rowNhư đã đề cập, hướng flex mặc định là .container { display: flex; flex-wrap: wrap; flex-direction: row; } Khi 2. Right to Left: row-reverseKhi flex-direction được gán giá trị .container { display: flex; flex-wrap: wrap; flex-direction: row-reverse; } Nếu bạn nhìn vào số thứ tự của các phần tử flex 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 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 trục dọc, bạn cần sử dụng 3. Top to Bottom: columnKhi .container { display: flex; flex-wrap: wrap; flex-direction: column; max-height: 35rem; /* so that items wrap */ } 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ó lẽ là dễ thấy nhất. Các phần tử sẽ chỉ bị bao bọc nếu thùng chứa được thiết lập một chiều cao cố định. 4. Bottom to Top: column-reverseTô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: column-reverse; max-height: 35rem; /* so that items wrap */ } Như bạn có thể thấy bên dưới, số các phần tử flex bắt đầu ở phía 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 Flex-flow ShorthandThuộc tính flex-flow: column wrap; thay vì: flex-direction: column; flex-wrap: wrap; Thuộc tính căn chỉnh FlexboxCăn chỉnh 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 ( Như bạn có thể kỳ vọng, hành vi của các thuộc tính căn chỉnh phụ thuộc vào thuộc tính flex-direction. Ví dụ, Căn chỉnh dọc theo trục chínhThuộ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. Nó phân phối khoảng trống còn lại sau khi trình duyệt đã tính 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ó năm giá trị:
Để sử dụng Pen sau đây cho thấy các giá trị khác
nhau của thuộc tính Căn dọc theo trục dọcĐây là lúc để nâng mọi thứ lên cấp độ tiếp theo. Bạn có thể sử dụng ba thuộc tính CSS để căn chỉnh các phần tử dọc theo trục dọc. Hai trong số chúng ( Căn chỉnh một dòngCác
thuộc tính Cả hai đều có thể nhận các giá trị sau:
Pen bên dưới cho thấy các thuộc tính Về bản chất, khi Căn chỉnh nhiều dòngThuộ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ử flex 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 wrap). Nó
có thể nhận sáu giá trị khác nhau:
Dưới đây, bạn có thể thấy các pen khác nhau cho thấy các giá trị khác nhau của thuộc tính Hai ví dụ đầu tiên không có một thuộc tính một dòng ( 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 cơ bản vững chắc về căn chỉnh flexbox. Tóm tắtBạn đã làm được! Tóm lại; điều quan trọng nhất cần nhớ là bạn cần lưu ý các hướng của trục chính và trục dọc. Hãy luôn bắt đầu căn chỉnh của bạn bằng cách
thiết lập thuộc tính
|