Bố trí hộp linh hoạt
Với sự ra đời của Hộp linh hoạt CSS , nhiều cơn ác mộng 1 của các nhà thiết kế web đã được giải quyết. Một trong những hacky nhất, liên kết dọc. Bây giờ nó có thể ngay cả ở độ cao chưa biết .
"Hai thập kỷ hack bố trí sắp kết thúc. Có thể không phải ngày mai, mà là sớm, và cho đến hết cuộc đời."
- Huyền thoại CSS Eric Meyer tại W3Conf 2013
Hộp linh hoạt (hay nói ngắn gọn là Flexbox), là một hệ thống bố cục mới được thiết kế riêng cho mục đích bố trí. Các đặc điểm kỹ thuật nêu :
Bố cục Flex tương tự bề ngoài với bố cục khối. Nó thiếu nhiều thuộc tính văn bản hoặc tài liệu trung tâm phức tạp hơn có thể được sử dụng trong bố cục khối, chẳng hạn như phao và cột. Đổi lại, nó có được các công cụ đơn giản và mạnh mẽ để phân phối không gian và sắp xếp nội dung theo cách mà các ứng dụng web và các trang web phức tạp thường cần.
Làm thế nào nó có thể giúp đỡ trong trường hợp này? Được rồi để xem.
Cột thẳng hàng
Sử dụng Twitter Bootstrap, chúng tôi .rowcó một số .col-*s. Tất cả những gì chúng ta cần làm là hiển thị .row2 mong muốn dưới dạng hộp chứa flex và sau đó căn chỉnh tất cả các mục flex của nó (các cột) theo chiều dọc theo thuộc align-itemstính.
VÍ DỤ TẠI ĐÂY (Vui lòng đọc các bình luận cẩn thận)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
Đầu ra
Vùng màu hiển thị hộp đệm của cột.
Làm rõ về align-items: center
8.3 Căn chỉnh trục chéo: align-itemstài sản
Các mục flex có thể được căn chỉnh theo trục chéo của dòng hiện tại của thùng chứa flex, tương tự justify-contentnhưng theo hướng vuông góc. align-itemsđặt căn chỉnh mặc định cho tất cả các mục của bộ chứa flex, bao gồm các mục flex ẩn danh .
align-items: center;
Theo giá trị trung tâm, hộp lề của vật phẩm flex được đặt chính giữa trong trục chéo trong dòng.
Thông báo lớn
Lưu ý quan trọng # 1: Twitter Bootstrap không chỉ định các widthcột trong các thiết bị nhỏ hơn trừ khi bạn cung cấp một trong các .col-xs-#lớp cho các cột.
Do đó, trong bản demo cụ thể này, tôi đã sử dụng .col-xs-*các lớp để các cột được hiển thị đúng trong chế độ di động, vì nó chỉ định widthrõ ràng của cột.
Nhưng thay vào đó, bạn có thể tắt bố cục Flexbox chỉ bằng cách thay đổi display: flex;thành display: block;các kích thước màn hình cụ thể. Ví dụ:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Hoặc bạn có thể xác định .vertical-align chỉ về kích cỡ màn hình cụ thể như sau:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
Trong trường hợp đó, tôi sẽ đi theo cách tiếp cận của @KevinNelson .
Lưu ý quan trọng # 2: Tiền tố nhà cung cấp bị bỏ qua do ngắn gọn. Cú pháp Flexbox đã được thay đổi trong thời gian. Cú pháp viết mới sẽ không hoạt động trên các phiên bản cũ hơn của trình duyệt web (nhưng không cũ như Internet Explorer 9! Flexbox được hỗ trợ trên Internet Explorer 10 trở lên).
Điều này có nghĩa là bạn cũng nên sử dụng các thuộc tính có tiền tố của nhà cung cấp như display: -webkit-boxvà trong chế độ sản xuất.
Nếu bạn nhấp vào "Toggle View Compiled" trong Demo , bạn sẽ thấy phiên bản khai báo CSS có tiền tố (nhờ Autoprefixer ).
Các cột có chiều cao đầy đủ với nội dung được sắp xếp theo chiều dọc
Như bạn thấy trong bản demo trước , các cột (các mục flex) không còn cao bằng thùng chứa của chúng (hộp chứa flex. Tức là .rowphần tử).
Điều này là do sử dụng centergiá trị cho align-itemstài sản. Giá trị mặc định là stretchđể các mục có thể lấp đầy toàn bộ chiều cao của phần tử cha.
Để khắc phục điều đó, bạn cũng có thể thêm display: flex;vào các cột:
VÍ DỤ TẠI ĐÂY (Một lần nữa, hãy chú ý các ý kiến)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
Đầu ra
Vùng màu hiển thị hộp đệm của cột.
Cuối cùng, nhưng không kém phần quan trọng , lưu ý rằng các bản demo và đoạn mã ở đây nhằm cung cấp cho bạn một ý tưởng khác, để cung cấp một cách tiếp cận hiện đại để đạt được mục tiêu. Vui lòng lưu ý phần " Thông báo lớn " nếu bạn định sử dụng phương pháp này trong các trang web hoặc ứng dụng trong thế giới thực.
Để đọc thêm bao gồm hỗ trợ trình duyệt, các tài nguyên này sẽ hữu ích:
1. Sắp xếp theo chiều dọc một hình ảnh bên trong div với chiều cao đáp ứng
2. Tốt hơn là sử dụng một lớp bổ sung để không thay đổi mặc định của Twitter Bootstrap .row.
div, không có văn bản bên trong, đại loại như thế này jsfiddle.net/corinem/Aj9H9 nhưng trong ví dụ này tôi không sử dụng bootstrap