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é.
Thực ra đây là do cách hoạt động của flexbox có hơi kì cục một chút, nếu không cẩn thận thì giao diện có thể bị overflow luôn. Nên mẹo này là dùng để khắc phục lỗi bất thường trên của flexbox. Ok cùng bắt đầu tìm hiểu ngay thôi.
1. Chia layout với flexbox
Để bắt đầu, mình...
Flexbox là 1 module. Cần phải set nhiều properties ở container(flex container) và children(flex items).
Layout thông thường dựa trên block & inline flow direction.
Flex layout dựa trên flex-flow direction.
Hãy xem miêu tả dưới đây :
Ảnh trên là setting thông thường của flexbox.
Items sẽ được đặt theo hoặc là main-axis (trục ngang - bắt đầu từ main-start đến main-end) hoặc cross axis (trục dọc - bắt đầu từ...
1. Introduction
Width: Auto
width mặc định của các block-element như <div> hoặc <p> đều là auto, điều này làm cho chúng chiếm toàn bộ chiều rộng của block chứa chúng.
Theo thông số CSS:
‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ = width of containing block
Khi một element có width là auto, nó có thể có margin, padding và...
