Trở về

Tìm hiểu về flexbox, có thể thay thế được float?

bởi Vi Nè

Để trả lời được câu hỏi, liệu flexbox có thể thay thế được float thì chúng ta phải tìm hiểu chúng là gì và chức năng của chúng như thế nào.

Float là gì?

Float là CSS, dùng để chỉ định đối tượng nằm về phía trái hoặc phải, thuộc tính này có thể đưa 1 hoặc nhiều đối tượng nằm cùng 1 hàng, đi kèm nó cũng có những thuộc tính khác như: width, display, …
Bạn có thể hiểu như hình bên dưới:

Flexbox là gì?

Cùng gần giống như float nhưng flexbox là thuộc tính CSS3 và nó như là sự phát triển của float, một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị. Nói theo cách khác, bạn không cần thiết lập kích thước của phần tử, không cần cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn.

Dưới đây là sơ đồ cấu trúc Flexbox từ Mozilla Developer Network.

Ví dụ, chúng ta có đoạn HTML sau:

và theo đó là đoạn CSS:

Thì ra sẽ được DEMO sau:

Chúng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon