Giới thiệu:

Flexbox là 1 trong kiểu dàn trang (layout mode) cơ mà nó vẫn tự cân đối kích thước của những phần tử bên trong để hiển thị trên đều thiết bị. Nói theo một cách khác, các bạn không quan trọng lập form size của phần tử, không yêu cầu cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc, cơ hội đó các phần tử bên trong có thể hiển thị theo ý muốn.

Bạn đang xem: Display flex là gì

Khái niệm cơ bản:

Bố viên Flex được tùy chỉnh thiết lập từ một khung lớn (parent container) nhập vai trò là form linh hoạt (flex containter) và những thẻ bé ngay trong nó (immediate children) nhập vai trò các mục nhỏ linh hoạt (flex items).

*
Từ hình hình ảnh trên chúng ta có thể thấy những thuộc tính và thuật ngữ được thực hiện để biểu hiện khung linh động (flex containter) và những các mục nhỏ tuổi linh hoạt (flex items). Để hiểu sâu hơn, bạn có thể đọc tài liệu flexbox model bởi W3CViệc bố trí flexbox sẽ trải trải qua không ít lần tái diễn và một số thay đổi cú pháp từ dự thảo ban sơ của nó trong thời điểm 2009, do đó tránh nhầm lẫn vaà để rõ ràng bọn họ nên sử dụng biến hóa lần sau cuối vào (tháng 9 năm 2014). Nếu khách hàng cần gia hạn tính tương xứng của trình trông nom cũ, chúng ta cũng có thể đọc nội dung bài viết này về phong thái sử dụng nó một cách tốt nhất.

Các trình duyệt cung ứng flexbox

Chrome 29+Firefox 28+Internet Explorer 11+Opera 17+Safari 6.1+ (sử dụng tiền tố -webkit-)Android 4.4+iOS 7.1+ (sử dụng chi phí tố -webkit-)

Cách sử dụng

Để sử dụng bố cục Flexbox bạn chỉ việc đặt giá chỉ trị đến thuộc tính display bên trên khung to (parent container).

.flex-container display: -webkit-flex; /* Safari */ display: flex;Hoặc bạn có nhu cầu nó hiển thị như một phần tử inline….

.flex-container display: -webkit-inline-flex; /* Safari */ display: inline-flex;Chú ý: Bạn chỉ cần đặt nằm trong tính trên vào khung bự là các thẻ con sẽ mau lẹ trở thành những mục linh hoạt.

Các ở trong Tính Của Flexbox Container

flex-direction

Thuộc tính này luật pháp cách trình bày các mục hoạt bát trong size linh hoạt, bằng cách đặt hướng cho khung hoạt bát theo một trục chính. Chúng hoàn toàn có thể được trình diễn theo nhì hướng, giống như hàng ngang xuất xắc hàng dọc.

Theo hàng ngang (row), những mục linh hoạt sẽ tiến hành sắp xếp theo một hàng từ trái qua phải.

.flex-container -webkit-flex-direction: row; /* Safari */ flex-direction: row;

*

Theo hàng hòn đảo ngược (row-reverse), các mục linh hoạt sẽ tiến hành sắp xếp theo một hàng ngược lại.

.flex-container -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse;

*

Tương từ bỏ với hàng dọc (column), các mục linh hoạt sẽ tiến hành sắp xếp theo một cột từ bên trên xuống dưới.

.flex-container -webkit-flex-direction: column; /* Safari */ flex-direction: column;

*

Và ngược lại…

-webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse;

*

Giá trị khoác định: rowChú ý: sản phẩm (row) với hàng đảo ngược (row-reverse) được phụ thuộc vào chế độ viết do đó ở chế độ viết từ cần qua trái (rtl) thì chúng sẽ auto được hòn đảo ngược.

flex-wrap

Ý tưởng ban sơ của flexbox là đặt những mục hoạt bát theo một sản phẩm duy nhất. Dẫu vậy sẽ cầm cố nào nếu chúng ta muốn gồm một bố cục với các mục xếp thành các hàng? trực thuộc tính flex-wrap được tạo ra để giúp họ giải quyết điều này.

Các mục hoạt bát được hiển thị trên cùng một hàng, mặc định chúng sẽ auto dãn hoặc thu không lớn để vừa cùng với chiều rộng của form lớn.

.flex-container -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap;

*

Các mục linh hoạt có thể hiển thị các hàng trường đoản cú trái qua nên và từ bên trên xuống dưới nếu cần

.flex-container -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap;

*

Thậm chỉ cần ngược lại nếu khách hàng muốn

.flex-container -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse;

*

Giá trị mang định: nowrapChú ý: thuộc tính này dựa vào vào chính sách viết cho nên vì thế ở cơ chế viết từ nên qua trái (rtl) thì bọn chúng sẽ auto được hòn đảo ngược.

flex-flow

Thuộc tính này là 1 trong những dạng viết tắt (shorthand) mang đến hai nằm trong tính flex-direction và flex-wrap.

Xem thêm: Diện Tích Xung Quanh Hình Lập Phương, Please Wait

.flex-container -webkit-flex-flow: Giá trị khoác định: row nowrap

justify-content

Thuộc tính justify-content sắp tới xếp các mục linh động theo trục chính của dòng lúc này trong khung linh hoạt. Nó giúp bổ sung cập nhật không gian còn thừa trong cả khi những mục linh hoạt trên một dòng không thể co và giãn hoặc đã dành đến kích thước tối đa.

.flex-container -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start;Các mục linh hoạt được thu xếp ở bên trái của form linh hoạt theo phương thức ltr

*

.flex-container -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end;Các mục linh động được bố trí ở bên yêu cầu của form linh hoạt theo phương thức ltr

*

.flex-container -webkit-justify-content: center; /* Safari */ justify-content: center;Các mục hoạt bát được sắp xếp ở giữa khung linh hoạt

*

.flex-container -webkit-justify-content: space-between; /* Safari */ justify-content: space-between;Các mục linh hoạt sẽ được hiển thị với khoảng cách tương đương nhau chính giữa chúng, mục linh hoạt thứ nhất và sau cùng được xếp vào hai bên của khung linh hoạt

*

.flex-container -webkit-justify-content: space-around; /* Safari */ justify-content: space-around;Các mục linh động được hiển thị với khoảng cách bằng nhau bao phủ mọi mục linh hoạt, kể cả mục linh hoạt thứ nhất và cuối cùng

*
Giá trị mang định: flex-start

Các chúng ta có thể xem cụ thể hơn tại trên đây : https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertieslink tìm hiểu thêm : https://css-tricks.com/snippets/css/a-guide-to-flexbox/