- vừa được xem lúc

FlexBox Cheat Sheets 2021

0 0 45

Người đăng: Quang Minh

Theo Viblo Asia

Giới thiệu

Xin chào các bạn, mình có đọc được một bài viết chia sẻ về FlexBox Cheat Sheets rất đầy đủ và dễ hiểu, mình chia sẻ lại ở bài viết này nhé.

Kiến trúc FlexBox

FlexBox có thể chỉ định những items ở trong hiển thị theo trục chính (Main Axis) hoặc trục chéo (Cross Axis) vuông góc với trục chính.

Các thuộc tính của FlexBox

flex-direction

Thuộc tính này dàn các items theo chiều ngang

hoặc theo chiều dọc

justify-content

Thuộc tính này sắp xếp các items theo trục main axis

align-content

Thuộc tính này sử dụng để căn chỉnh khoảng cách các item bên trong container dọc theo trục cross axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

align-items

Thuộc tính này sử dụng để điều chỉnh vị trí bắt đầu và căn chỉnh các item bên trong container dọc theo trục cross axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

align-self

Thuộc tính này có tác dụng tương tự như align-items của phần container nhưng sử dụng riêng cho từng item, bạn có thể dùng nó để đặt lại vị trí cho một số item mà align-items đã quy định.

flex - grow | shrink | wrap

flex-grow: cho phép các phần tử giãn theo độ rộng của container.

flex-shrink: ngược lại với thuộc tính flex-grow ở trên, nó không giãn ra mà lại co lại khi chúng ta thay đổi độ rộng của container.

flex-wrap: điều chỉnh xuống dòng trong container.

Cách viết tắt

flex: Kết hợp flex-grow, flex-shrink và flex-basis.

flex-flow: Kết hợp flex-direction và flex-wrap.

Kết luận

Hi vọng bài viết này sẽ giúp bạn làm hiểu và áp dụng FlexBox một cách trơn chu, cảm ơn ?.

Bình luận

Bài viết tương tự

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 62

- vừa được xem lúc

Giỏi nhanh CSS Flexbox

Giới thiệu. Chào toàn thể Anh Chị Em của cộng đồng Viblo .

0 0 49

- vừa được xem lúc

Hiểu thêm về justify-content trong Flexbox qua loạt ảnh gif

1. Flexbox là gì. Khi nào nên dùng flexbox. Thuộc tính justify-content của flexbox.

0 0 50

- vừa được xem lúc

Trận chiến CSS giữa: Grid và Flexbox

CSS Flexbox đã khá là quen thuộc đối với thế giới của front-end developers trong những năm gần đây. Điều này là hết sức dễ hiểu, vì Flexbox đã đem lại một sự tiện lợi cũng như dễ sử dụng để tạo ra các

0 0 170

- vừa được xem lúc

Một số cách sử dụng CSS để tạo các cột bằng nhau trong thiết kế web

1. Lời mở đầu.

0 0 51

- vừa được xem lúc

Học về Flexbox

Flexbox ra đời giúp cho việc thiết kế layout trên trang web trở nên dễ dàng và ngắn gọn hơn rất nhiều so với thời dùng float. Về Flexbox.

0 0 25