Mô hình CSS Flexbox được tạo ra để cải thiện Mô hình CSS Box đã được thiết lập. Mô hình Flexbox vẫn chứa các yếu tố chính của Mô hình hộp (lề, phần đệm, đường viền và nội dung), nhưng cung cấp tính linh hoạt để lấp đầy không gian một cách tốt nhất với con của vùng chứa / cha mẹ.
Hướng dẫn này sẽ giúp bạn hiểu rõ hơn về mô-đun flexbox để bạn có thể bắt đầu làm cho các trang web của mình phản hồi nhanh hơn.
Sau đây là mã khởi động cho phần trình diễn mô hình flexbox cơ bản - vui lòng theo dõi khi chúng ta nói về flexbox!
<!DOCTYPE html>
<head>
<title>Flexbox</title>
<style>
* {
box-sizing: border-box;
font-family: 'Roboto'
}
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
}
.child-item {
height: 200px;
width: 200px;
margin: 0px;
padding: 20px;
}
.child-item:first-child {
background: orange;
}
.child-item.one {
background: purple;
}
.child-item.two {
background: aliceblue;
}
.child-item.three {
background: grey;
}
.child-item.four {
background: pink;
}
.child-item.five {
background: yellowgreen;
}
.child-item.six {
background: red;
}
.child-item.seven {
background: blanchedalmond;
}
.child-item.eight {
background: white;
}
.child-item.nine {
background: lightblue;
}
.child-item.nine {
background: darkred;
}
.child-item:last-child {
background: yellow;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="child-item">Lisa Simpson</div>
<div class="child-item one">Bart Simpson</div>
<div class="child-item two">Maggie Simpson</div>
<div class="child-item three">Homer Simpson</div>
<div class="child-item four">Marge Simpson</div>
<div class="child-item five">Grampa Simpson</div>
<div class="child-item six">Santa's Little Helper</div>
<div class="child-item seven">Apu Nahasapeemapetilon</div>
<div class="child-item eight">Moe Szyslak</div>
<div class="child-item nine">Ned Flanders</div>
<div class="child-item ten">Snowball II</div>
</div>
<script src="" async defer></script>
</body>
</html> Thuộc tính vùng chứa mẹ (Flexbox)
display:flex
Thuộc tính hiển thị có một số giá trị mà chúng ta có thể sử dụng để định vị các vùng chứa của mình trên màn hình. Bạn có thể đã thấy khối, khối nội tuyến, không có, ẩn, nội dòng rồi, nhưng khối mà chúng ta sẽ tập trung vào ngay bây giờ được gọi là flex .
Đầu tiên, những gì tôi muốn bạn làm là hình dung một thùng chứa lớn - rương kho báu, hộp đồ chơi hoặc hộp các tông - và sau đó tưởng tượng đặt các vật dụng bên trong thùng. Vùng chứa lớn được chúng tôi gọi là chính hoặc flexbox và các mặt hàng nhỏ hơn bên trong hộp chứa là trẻ em hoặc các mục linh hoạt.
Khi chúng tôi thêm display:flex đối với vùng chứa mẹ, thuộc tính được gán cho vùng chứa đó và riêng vùng chứa đó - các con không được thừa kế tài sản (tuy nhiên, chúng có thể sử dụng tài sản cho vùng chứa của riêng mình, điều này sẽ ảnh hưởng đến của chúng bọn trẻ).
Thuộc tính này mở ra tất cả các loại thuộc tính khác mà chúng ta có thể sử dụng mà trước đây chúng ta không thể sử dụng:flex-direction , justify-content , align-items , align-self , flex-wrap và flex-flow .
Chạy trình chỉnh sửa mã ở trên. Ngay bây giờ, bạn sẽ thấy một vùng chứa lớn màu xanh lá cây, vùng chứa mẹ và 11 vùng chứa nhỏ hơn, các vùng chứa con, bên trong vùng chứa mẹ.
Hướng của các vùng chứa con nằm chồng lên nhau vì mặc định là display: block . Nếu bạn nhớ lại, khi chúng tôi sử dụng display: block , vùng chứa chiếm toàn bộ hàng trong đó. Mặc định của lề mở rộng theo chiều rộng của vùng chứa mẹ, dẫn đến cả hai vùng chứa con nằm chồng lên nhau.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia chương trình đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Ngược lại, sử dụng display:flex cho phép chúng ta dễ dàng định vị các vùng chứa con theo bất kỳ cách nào chúng ta muốn trong vùng chứa mẹ mà không cần phải sử dụng các thuộc tính của mô hình hộp cũ hơn như float và vertical-align.
Thử thêm display:flex vào CSS trong thẻ kiểu trong trình chỉnh sửa mã để CSS của vùng chứa mẹ trông giống như sau:
.parent-container {
height: 700px;
background: green;
width: 700px;
padding: 20px;
display: flex;
Thêm display:flex vào .parent-container sẽ dẫn đến thay đổi hướng của các vùng chứa con. Sau khi bạn nhấn, bây giờ bạn sẽ thấy các thùng chứa con cạnh nhau.
Bằng cách sử dụng display:flex thay vì display: block , lề mặc định được đặt thành 0. Sau đó, chúng tôi có thể thao tác với nó nhưng chúng tôi thấy phù hợp!
hướng uốn
Thuộc tính flex-direction thiết lập trục chính của vùng chứa của chúng ta. Cài đặt mặc định trong vùng chứa linh hoạt là hàng. Khi thiết lập vùng chứa mẹ với display:flex , không cần thiết lập hướng linh hoạt trừ khi bạn cần nội dung của mình nằm trong một cột.
Trục chính theo hướng mặc định là từ trái sang phải và trục chéo từ trên xuống dưới, như được thấy ở đây:
Hãy thử thêm flex-direction: column vào .parent-container của chúng tôi trong trình soạn thảo mã ở trên. Điều gì xảy ra khi bạn nhấn?
Có vẻ như các trục sẽ lật khi chúng ta chuyển flex-direction thành cột:trục chính của chúng ta trở thành trục chéo và sau đó trục chéo của chúng ta trở thành trục chính, như được minh họa bên dưới:
Kết quả là, các thùng chứa trẻ em của chúng tôi trong ví dụ của chúng tôi đã lật trục của chúng! Vì vậy, bây giờ các vùng chứa con lại một lần nữa nằm chồng lên nhau.
Điều lớn nhất cần nhớ về flex-direction là hướng của trục chính có tương ứng với giá trị của flex-direction của bạn không thuộc tính (cột từ trên xuống dưới, hàng từ trái sang phải).
Nội dung căn lề liên quan đến khoảng cách trên trục chính và căn chỉnh các mục liên quan đến khoảng cách xung quanh trục chéo. Chút nữa chúng ta sẽ đi vào những chỗ nghỉ đó.
Có hai khả năng khác cho hướng linh hoạt:row-reverse và column-reverse . Các thuộc tính này rất giống với hàng và cột, nhưng flex-items được đặt theo thứ tự ngược lại, từ phải sang trái, trong trường hợp đảo ngược hàng và từ dưới lên trên cho đảo ngược cột.
Trường hợp sử dụng cho các giá trị cụ thể này xảy ra khi bạn cần có một bố cục hoặc thứ tự khác trên trang của mình từ web đến điện thoại di động hoặc máy tính bảng.
flex-wrap
Cho đến nay, chúng ta đã học cách display:flex ảnh hưởng đến các vùng chứa con của cha mẹ và sau đó là cách điều khiển luồng của các vùng chứa con đó trong một hàng hoặc trong một cột. Nếu kích thước của phụ huynh hết phòng thì sao? Điều gì xảy ra? Và làm thế nào chúng ta có thể sửa chữa nó?
Câu trả lời có dạng thuộc tính được gọi là flex-wrap . Theo mặc định, flex-wrap được đặt thành nowrap . Điều này có nghĩa là các vùng chứa con có thể làm tràn vùng chứa mẹ, gây ra các vấn đề bố trí không mong muốn. Hãy thử thêm flex-wrap: wrap; vào .parent-container và hãy xem chuyện gì xảy ra:
Cách bố trí thùng hàng ở đây trông đẹp hơn rất nhiều. Flex-wrap sẽ lấy tất cả các thành phần con, xếp chúng cạnh nhau cho đến khi chạm chiều rộng của vùng chứa mẹ và sau đó chuyển sang hàng tiếp theo để thêm nhiều vùng chứa con hơn để lặp lại quy trình cho đến khi tất cả các vùng chứa đã được hiển thị.
Flex-wrap có ba thuộc tính khả dụng:nowrap, wrap và wrap-reverse. quấn ngược lại giống như quấn ngoại trừ nó chảy từ dưới lên trên thay vì từ trên xuống dưới.
flex-flow
Flex-flow là viết tắt của flex-direction và flex-wrap . Cú pháp là flex-flow: column wrap nếu bạn muốn hướng uốn của bạn là cột và hướng uốn của bạn là bọc. flex-flow: row nowrap là giá trị mặc định.
justify-content
Thuộc tính nội dung justify liên quan đến việc căn chỉnh dọc theo trục chính của vùng chứa mẹ. Nó giúp phân phối flex-items của bạn qua trục chính mà bạn không cần phải tính toán không gian cần thiết. Sáu giá trị thuộc tính được sử dụng phổ biến nhất cho justify-content là flex-start (mặc định), flex-end , center , space-around , space-between và space-evenly .
flex-start:
flex-end:
trung tâm:
không gian xung quanh:
khoảng trắng giữa:
khoảng trắng đồng đều:
căn chỉnh các mục
Sự khác biệt lớn nhất giữa align-items và justify-content , bên cạnh trục, nó phân phối các vùng chứa con, là giá trị mặc định của nó. Xin nhắc lại, khi chúng tôi sử dụng flex-direction giá trị mặc định cho justify-content là flex-start . Đó không phải là trường hợp của align-items . Thay vào đó, giá trị mặc định là căng.
Để minh họa, hãy quay lại trình chỉnh sửa mã ở đầu trang và lấy ra chiều rộng và chiều cao trên .child-container . Chúng tôi đã có display:flex và flex-direction đặt. Hãy chuyển đổi giữa flex-direction: row và flex-direction: column để xem vùng chứa hoạt động như thế nào mà không có bất kỳ ràng buộc nào đối với nó. Nó như thế nào so với những gì bạn mong đợi?
Không có align-items bộ quy tắc, vùng chứa con trải dài bằng kích thước của vùng chứa mẹ trên trục chéo. Tuy nhiên, nếu chúng tôi đặt align-items trên vùng chứa mẹ, kích thước của vùng chứa con sẽ tự động điều chỉnh theo kích thước của nội dung cộng với bất kỳ phần đệm và đường viền nào bạn có trên đó.
align-items:kéo dài
align-items:center
Tất cả các thuộc tính khác mà chúng tôi đã xem qua cho justify-content cũng áp dụng tại đây cho align-items và có nghĩa tương tự, ngoại trừ việc chúng ta vừa chuyển trục mà chúng ta đang ở trên.
Thuộc tính vùng chứa con (Flex-item)
đặt hàng
Thông thường, thứ tự của các vùng chứa trong thành phần mẹ sẽ tuân theo cách chúng được bố trí trong tệp HTML. Tuy nhiên, nếu bạn muốn kiểm soát thứ tự của các vùng chứa - ví dụ:nếu bạn muốn đánh dấu một vùng chứa con khác trước tiên khi bạn đang sử dụng thiết bị di động - bạn có thể làm điều đó bằng cách sử dụng thuộc tính đặt hàng. Thuộc tính là một giá trị số cho biết thứ tự mà các vùng chứa con sẽ đi vào khi được hiển thị trên màn hình.
tự căn chỉnh
align-self cho phép căn chỉnh mặc định hoặc căn chỉnh theo align-items được ghi đè. Hãy nhớ rằng, align-self chỉ hoạt động nếu chính nó là display:flex . Các giá trị cho align-self có thể là flex-start , flex-end , đường cơ sở hoặc kéo dài.
Kết luận
Trong hướng dẫn này, chúng tôi đã trình bày những kiến thức cơ bản về mô hình hộp linh hoạt. Chúng tôi phát hiện ra rằng flexbox liên quan đến mối quan hệ giữa vùng chứa mẹ và vùng chứa con của nó. Các thuộc tính flexbox của cha mẹ tác động trực tiếp đến chuyển động của vùng chứa con trong không gian trống của cha mẹ.
Chúng tôi sử dụng flex-direction , justify-content , align-items và flex-wrap để thao túng vị trí của con đối với cha mẹ và chúng tôi sử dụng trật tự và align-self trên con để ghi đè một số mặc định hoặc quy tắc được đặt cho cha mẹ.
Vui lòng sử dụng các trình chỉnh sửa mã ở đây để chơi với các thuộc tính này để bạn có thể thực hành. Bạn đang trên con đường trở thành chuyên gia flexbox!