FLEX CSS LÀ GÌ

     

Giới thiệu:

Flexbox là một kiểu dàn trang (layout mode) nhưng mà nó đang tự phẳng phiu kích thước của các phần tử bên trong để hiển thị trên số đông thiết bị. Nói theo cách khác khác, chúng ta không quan trọng lập kích thước của phần tử, không nên cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang giỏi chiều dọc, dịp đó các phần tử bên trong có thể hiển thị theo ý muốn.

Bạn đang xem: Flex css là gì

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

Bố cục Flex được thiết lập từ một khung phệ (parent container) vào vai trò là size linh hoạt (flex containter) và các thẻ bé ngay trong nó (immediate children) nhập vai trò các mục bé dại 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 đạt khung linh động (flex containter) và các các mục bé dại linh hoạt (flex items). Để phát âm sâu hơn, bạn có thể đọc tư liệu flexbox mã sản phẩm bởi W3CViệc sắp xếp flexbox đã trải trải qua nhiều lần tái diễn và một số biến đổi cú pháp tự dự thảo thuở đầu của nó trong thời gian 2009, cho nên tránh lầm lẫn vaà để rõ ràng chúng ta nên sử dụng chuyển đổi lần cuối cùng vào (tháng 9 năm 2014). Nếu như khách hàng cần gia hạn tính tương thích của trình coi ngó cũ, chúng ta cũng có thể đọc nội dung bài viết này về cách sử dụng nó một cách giỏi nhất.

Các trình duyệt cung cấp 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 tiền tố -webkit-)

Cách sử dụng

Để sử dụng bố cục tổng quan Flexbox bạn chỉ việc đặt giá chỉ trị mang lại thuộc tính display bên trên khung mập (parent container).

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

.flex-container display: -webkit-inline-flex; /* Safari */ display: inline-flex;Chú ý: Bạn chỉ việc đặt thuộc tính trên vào khung béo là các thẻ bé sẽ nhanh chóng trở thành các mục linh hoạt.

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

flex-direction

Thuộc tính này biện pháp cách trình bày các mục hoạt bát trong khung linh hoạt, bằng cách đặt hướng mang lại khung linh động theo một trục chính. Chúng rất có thể được trình diễn theo nhì hướng, y hệt như hàng ngang hay hàng dọc.

Theo mặt 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.

Xem thêm: Trình Bày Các Bước Nối Dây Dẫn Lõi 1 Sợi, Cách Nối Dây Dẫn Điện Lõi Nhiều Sợi

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

*

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

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

*

Tương từ với sản phẩm dọc (column), những mục linh hoạt sẽ tiến hành sắp xếp theo một cột từ 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ú ý: hàng (row) cùng hàng hòn đảo ngược (row-reverse) được dựa vào vào chính sách viết vì thế ở cơ chế viết từ phải 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 các mục linh hoạt theo một hàng duy nhất. Tuy vậy sẽ nuốm nào nếu họ muốn có một bố cục tổng quan với các mục xếp thành nhiều hàng? trực thuộc tính flex-wrap được tạo ra để giúp chúng ta giải quyết điều này.

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

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

*

Các mục linh hoạt rất có thể hiển thị những hàng từ bỏ trái qua yêu cầu và từ trên xuống bên dưới nếu cần

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

*

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

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

*

Giá trị mang định: nowrapChú ý: nằm trong tính này dựa vào vào cơ chế viết cho nên ở chính sách viết từ buộc phải qua trái (rtl) thì bọn chúng sẽ tự động đượ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) đến hai thuộc tính flex-direction và flex-wrap.

Xem thêm: Kinh Nghiệm Đi Du Lịch Bụi Đài Loan Tự Túc 2020, Kinh Nghiệm Du Lịch Đài Loan Tự Túc

.flex-container ;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 hoạt bát theo trục bao gồm của dòng hiện tại trong size linh hoạt. Nó giúp bổ sung không gian còn thừa ngay cả khi những mục hoạt bát trên một chiếc không thể co và giãn hoặc đã đoạt đến size tối đa.

.flex-container -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start;Các mục linh hoạt được bố trí ở phía bên trái của form linh hoạt theo dạng ltr

*

.flex-container -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end;Các mục linh hoạt được sắp xếp ở bên cần của khung linh hoạt theo mô hình ltr

*

.flex-container -webkit-justify-content: center; /* Safari */ justify-content: center;Các mục linh động được bố trí ở giữa form 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 trọng tâm chúng, mục linh hoạt đầu tiên và sau cuối được xếp vào hai bên của size linh hoạt

*

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

*
Giá trị khoác định: flex-start

Các bạn có thể xem chi tiết hơn tại trên đây : https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-propertieslink xem thêm : https://css-tricks.com/snippets/css/a-guide-to-flexbox/