Trước trên đây khi tất cả chúng ta design trang web nhất là dàn trang layout, thực đơn, phân tách những cột cho những bộ phận nhập trang web thì đa số đều dùng những tính chất như float kèm cặp Từ đó là clear float nhằm phân tách cột . Khó khăn là lúc responsive và hiện trên nhiều vũ khí nên sửa đổi code không ít nên vô cùng tốn thời hạn.
Hoặc nhanh chóng hơn vậy thì chúng ta dùng CSS Framework như bootstrap ví dụ điển hình, tuy nhiên như vậy thì trang web của khách hàng lại sở hữu nhiều đoạn code ‘dư thừa’ chúng ta ko dùng tạo nên tác động cho tới vận tốc website…
Bạn đang xem: flex wrap là gì
Thế là Flexbox được sinh rời khỏi nhằm nâng cấp tình hình này, hỗ trợ cho việc dàn trang, canh những bộ phận cùng nhau linh động, đơn giản và tiết kiệm chi phí thời hạn rộng lớn thật nhiều.
Hôm ni bản thân viết lách bài bác này nhằm tất cả chúng ta nằm trong lần hiểu về sức khỏe của CSS Flexbox nhằm coi cơ hội dùng nó ra làm sao, nó sở hữu những tính chất hoặc gì tuy nhiên nhiều người lại dùng nó thay cho mang đến float hoặc inline thế nhỉ ?
# Thuộc tính Display: Flex
Để dùng flex nhập css thì giản dị là tất cả chúng ta chỉ việc dùng tính chất display: flex. Mình sở hữu layout như vậy này nhằm chúng ta dễ dàng tưởng tượng nha.
<div class="box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
Và bản thân css như sau:
.box {
display: flex;
width: 100%;
background-color: #1a1c28;
height: auto;
}
.item {
width: 150px;
height: 150px;
}
.item:nth-of-type(1) {
background-color: #bf4470;
}
.item:nth-of-type(2) {
background-color: #ffa400;
}
.item:nth-of-type(3) {
background-color: #07a787;
}
Và đấy là kết quả
See the Pen CSS Flexbox by EvonDev (@blackzero) on CodePen.
Roài giờ trên đây bản thân tiếp tục chuồn nhập cụ thể từng tính chất không giống của CSS Flexbox kèm cặp theo như hình minh họa làm cho chúng ta dễ dàng tưởng tượng nha. Mình tiếp tục phân tích và lý giải từng tính chất một mang đến chúng ta kèm cặp hình minh họa mang đến chúng ta dễ dàng nắm bắt. Nếu thiếu hiểu biết nhiều thì comment ở bên dưới bản thân tiếp tục vấn đáp vướng mắc của chúng ta. À 1 Note nhỏ:
Các chúng ta ghi nhớ kiểm tra code ở Codepen. Và bản thân khuyên nhủ tăng này đó là nên code theo nhằm hiểu nó hoạt động và sinh hoạt ra làm sao, rời khỏi sao nhé chớ gọi nhiều rồi gật gù đích thị đúng tuy nhiên ko thực hiện thì cũng công ly.
# Flex-direction
Như tên thường gọi của chính nó là hướng(trục), thì nhập flexbox sở hữu 2 trục chủ yếu này đó là trục X và trục Y tương tự biểu đồ vật toán học tập cơ chúng ta. Lưu ý là flexbox chỉ hiển thị bám theo một trong các 2 phía thôi nha, chứ không hề hiển thị 1 phen 2 phía như CSS Grid được(Sau này bản thân tiếp tục viết lách bài bác này sau).
Mặc tấp tểnh thì các items nhập flexbox được bố trí bám theo trục X và kể từ trái ngược qua loa nên. Đó là nguyên nhân vì như thế sao khi bản thân sử dụng display: flex ở ví dụ phía trên đầu thì những items được bố trí trở nên sản phẩm ngang và hiển thị kể từ trái ngược qua loa nên.
Trong flex-direction sở hữu 4 độ quý hiếm gồm những: row, row-reverse, column và column reverse. Các chúng ta nên ngỏ Codepen bản thân chèn phía trên lên rồi chèn từng tính chất nhập demo coi sở hữu nhìn giống hình bản thân minh họa ko nhé.
flex-direction: row là độ quý hiếm khoác tấp tểnh nhập flex-direction những items sẽ tiến hành bố trí theo hướng ngang(trục X) và hiển thị kể từ trái ngược quý phái nên.
flex-direction: row-reverse tương tự như nằm trong tính flex-direction: row tuy nhiên những items sẽ tiến hành hiển thị kể từ nên qua loa trái
Xem thêm: leaflet là gì
flex-direction: column các items được bố trí chiều dọc(trục Y) và hiển thị kể từ bên trên xuống dưới
flex-direction: column-reverse cũng tương đương với nằm trong tính flex-direction: column là những items được bố trí chiều dọc(trục Y) tuy nhiên không giống ở trong phần là những items hiển thị kể từ bên dưới lên trên
# Flex-wrap
Các chúng ta ghi nhớ resize trình duyệt ở những phác họa codepen ở tiếp sau đây giúp xem sự không giống nhau nha.
Cho luật lệ những items tự động hóa xuống sản phẩm hoặc vẫn luôn luôn phía trên và một sản phẩm khi độ dài rộng container thay cho thay đổi. Hơi khó khăn hiểu nhỉ, coi phác họa tiếp sau đây nha.
Flex-wrap sở hữu 3 độ quý hiếm này đó là wrap, nowrap và wrap-reverse.
Mặc tấp tểnh là nowrap nên chúng ta không nhất thiết phải phối. Khi tất cả chúng ta resize trình duyệt lại nếu như chúng ta dùng tính chất flex-wrap: nowrap thì những items tiếp tục tự động hóa co hẹp mang đến chớ không tồn tại rớt xuống sản phẩm, điều này dễ dàng thực hiện mang đến nội dung mặt mày trong(nếu có) bị xay lại rất có thể tạo nên xấu xí hình mẫu.
See the Pen CSS Flexbox by EvonDev (@blackzero) on CodePen.
flex-wrap: wrap ngược lại đối với flex-wrap: nowrap khi độ dài rộng container thay cho thay đổi và tổng chiều rộng lớn những items nằm trong lại to hơn chiều rộng lớn của container quấn ngoài thì nó sẽ bị rớt xuống.
Ví dụ như ở phác họa Codepen. Có 3 items từng item 150px, phỏng rộng(width) của container là 100% là khuông hiển thị ở codepen. Khi tất cả chúng ta resize trình duyệt thì khuông container nó cũng nhỏ bám theo, khi chạm qua loa item số 3 màu xanh lá cây lá 1 chút thì item tiếp tục tự động hóa rớt xuống.
See the Pen CSS Flexbox wrap by EvonDev (@blackzero) on CodePen.
Cuối nằm trong là flex-wrap: wrap-reverse cũng tương tự động như flex-wrap: wrap tuy nhiên nó ngược lại chứ không item rớt xuống thì nó rớt lên. Resize trình duyệt trừng trị hiểu ngay lập tức.
See the Pen CSS Flexbox wrap-reverse by EvonDev (@blackzero) on CodePen.
Lâu lâu chúng ta sở hữu thấy một trong những người tiêu dùng tính chất flex-flow: row wrap. Thuộc tính này viết lách nhằm gộp 2 tính chất flex-direction và flex-wrap lại nhé chúng ta. Nó như vậy này flex-flow: flex-direction flex-wrap. Ứng với flex-direction và flex-wrap chúng ta thay cho độ quý hiếm ứng nhập nhé.
Xem thêm: moodle là gì
# Tạm kết
Do bài bác này nhiều năm và tôi cũng ham muốn phân tích và lý giải cụ thể mang đến chúng ta. Nên bản thân phân tách bài bác về flexbox này trở nên 5 phần(4 phần lý thuyết và một trong những phần thực hành) mang đến chúng ta dễ dàng bám theo dõi và hứng ngán khi gọi vì thế nhiều năm quá.
Bài tiếp sau bản thân tiếp tục nói đến việc 4 tính chất không giống này đó là justify-content, align-items, align-self và order chúng ta ghi nhớ đón gọi nha. Nếu sở hữu chủ kiến hoặc chung ý hoặc thiếu hiểu biết nhiều thì comment bên dưới bản thân tiếp tục vấn đáp. Chúc chúng ta một ngày chất lượng lành lặn.
.
Bình luận