Sau Khi hoàn thành xong bài xích trước về những tính chất align, justify-content và order. Hôm ni bản thân tiếp tục trình làng nốt cho tới chúng ta những tính chất còn sót lại của flexbox. Là những tính chất cần thiết và khó khăn hiểu cho nên vì thế bài xích này khá lâu năm tuy nhiên bản thân khuyến nghị chúng ta nên hiểu không còn nhằm làm rõ và vận dụng bọn chúng một cách hiệu suất cao nha.
# Flex-basis
Set chiều rộng lớn hoặc độ cao của thành phần phụ thuộc vào flex-direction row hoặc column. Mặc tấp tểnh là flex-direction: row cho nên vì thế thời điểm hiện tại flex-basis tiếp tục ứng với tính chất width của thành phần và Khi flex-direction: column thì thời điểm hiện tại flex-basis được xem là height của thành phần.
Bạn đang xem: shrink là gì
Thuộc tính flex-basis tiếp tục đè lên trên tính chất width hoặc height của thành phần tùy nằm trong vô độ quý hiếm của flex-direction. Các chúng ta cũng có thể thay cho độ quý hiếm cho tới flex-direction vô Codepen sau đây nhằm hiểu rộng lớn nha.
See the Pen CSS Flexbox basis by EvonDev (@blackzero) on CodePen.
# Flex-grow
Thuộc tính này khá là phức tạp nè, nó cho những thành phần giãn theo đòi phạm vi của container, nhằm bản thân phân tích và lý giải cho tới chúng ta qua chuyện từng hình hình họa nha. trước hết bản thân cho những thành phần có tính rộng lớn là 120px.
Mặc định vị trị vô tính chất flex-grow là 0. Nghĩa là những thành phần tiếp tục không tự động hóa giãn nở độ dài rộng Khi chiều rộng lớn của container bao ngoài thay cho thay đổi. Hơi khó khăn hiểu nhỉ ? Để bản thân tăng flex-grow lên 1 cho những thành phần coi sao.
Wow. Các thành phần tự động hóa giãn nở ra đều nhau sao cho tới một vừa hai phải với khuông container luôn luôn, hoặc thiệt. Ủa vậy flex-grow: 1 là gì nhỉ, bản thân tăng thêm 999 liệu có sao không ? Không đem bị gì luôn luôn.
Giá trị của flex-grow cực kì sinh động chứ không hề vô cùng nghĩa là lúc phối độ quý hiếm flex-grow cho những thành phần thì những thành phần đều sở hữu tỉ trọng cùng nhau. Ví dụ phối toàn bộ những thành phần flex-grow là một trong những thì toàn bộ đều như nhau tỉ trọng 1:1, nếu như phối 999 cho tới toàn cỗ thì cũng vậy vì thế đều bằng nhau không còn tuy nhiên giản dị và đơn giản về không còn cũng chính là 1:1.
See the Pen CSS Flexbox grow – row by EvonDev (@blackzero) on CodePen.
Nhưng tuy nhiên fake sử phối những thành phần đều là flex-grow: 1, tuy nhiên phối riêng biệt thành phần loại 3 độ quý hiếm không giống thì tiếp tục ra làm sao nhỉ ?
Chỗ này còn có vận dụng toán học tập nên bản thân tiếp tục phân tích và lý giải cho tới chúng ta hiểu. Bây giờ bản thân đem 6 thành phần, tao phối flex-grow: 1 cho những thành phần thì những thành phần tiếp tục đều bằng nhau vì thế container tiếp tục chia đều cho 2 bên cho tới 6. Mỗi thành phần tiếp tục cướp 1/6 đúng không nhỉ này ?
Nhưng Khi bản thân tăng dù số 3 lên flex-grow: 2. Thì thời điểm hiện tại độ quý hiếm của flex-grow của những thành phần nằm trong lại được xem là 7 cho nên vì thế container tiếp tục chia đều cho 2 bên cho tới 7 vì thế 1 + 1 + 2 + 1 + 1 + 1. Ô số 3 đem flex-grow: 2 nên tiếp tục cướp 2/7 của container còn những thành phần còn sót lại cướp 1/7.
See the Pen CSS Flexbox grow – row2 by EvonDev (@blackzero) on CodePen.
Khi tăng dù số 3 lên flex-grow:3. Thì độ quý hiếm flex-grow của những thành phần nằm trong lại được xem là 8 và container tiếp tục chia đều cho 2 bên cho tới 8(1+1+3+1+1+1). Ô số 3 tiếp tục cướp 3/8 và những dù còn sót lại cướp 1/8. Và cứ thế kế tiếp nếu như chúng ta tăng.
Như tiếp tục thưa phía trên tính chất flex-grow thực hiện cho những thành phần tỉ trọng cùng nhau. Giả sử những thành phần đều sở hữu flex-grow: 4 và dù số 3 đem tính chất flex-grow: 12 thì nó cũng tương tự động như là một trong những với 3.
Tips của tớ hoặc sử dụng cho tới dễ dàng nắm bắt này đó là cứ lấy cái độ quý hiếm flex-grow của cái dù đem số lớn nhất phân chia cho tới dù đem số nhỏ nhất thì tiếp tục đi ra được tỉ trọng những thành phần đối với nhau. Như phía trên 12/4 được 3 suy đi ra những dù còn sót lại tiếp tục vị 1/3 dù lớn số 1.
Một điều nữa là khi sử dụng với flex-direction: column thì flex-grow tiếp tục giãn theo đòi theo hướng dọc và thời điểm hiện tại nó sẽ bị là height(chiều cao) chớ ko cần chiều rộng(width) nha. Cái này chúng ta vận dụng tương tự động nhằm tự động luyện tự động hiểu cho tới mau lên trình nha.
# Flex-shrink
Thuộc tính này thì nó ngược lại đối với tính chất flex-grow phía trên, nó ko giãn nở ra và lại co hẹp Khi tất cả chúng ta thay cho thay đổi phạm vi của container xuống. Mặc định vị trị vô flex-shrink là một trong những tức là được chấp nhận những thành phần co hẹp Khi phạm vi container hạ xuống.
Xem thêm: Kho sỉ giày sneaker đa dạng mẫu mã, giá chiết khấu cao
Các các bạn thấy chứ những thành phần nó sẽ bị co hẹp Khi tất cả chúng ta resize trình duyệt nhỏ xuống. Nhưng nếu như chúng ta phối cho tới nó flex-shrink: 0 thì nó sẽ không còn giãn nở và thời điểm hiện tại nó sẽ bị lấy độ quý hiếm của tính chất width.
See the Pen CSS Flexbox shrink by EvonDev (@blackzero) on CodePen.
Ở trên đây chúng ta thấy thành phần số 3 đem flex-shrink: 0. Thì Khi giãn nở lại cho tới ngưỡng phạm vi 120px(thuộc tính width) của chính nó thì nó vẫn sẽ lưu lại phạm vi cơ chứ không hề co hẹp không chỉ có vậy giống như những thành phần đem flex-shrink: 1. Mình đem note vô Codepen phía trên. Các các bạn vô test coi đúng không nhỉ nhá.
Cũng như flex-grow thì vô flex-shrink những thành phần cũng tỷ trọng cùng nhau nha. Phần tử A đem flex-shrink: 6 và những thành phần còn sót lại đem flex-shrink: 2. Thì cũng tương tự động là 3:1. Ủa nếu như dù đem flex-shrink: 3 còn những dù không giống flex-shrink: 1 thì Khi co hẹp nó sẽ sở hữu phạm vi vị 1/3 đối với những cái còn sót lại à ?
Trước Khi cút sâu sắc vô phân tích và lý giải thì bản thân van trình làng thêm một tính chất không giống nữa trước tiếp tục nhé. Đó là flex(thuộc tính nhá)
# Flex
Flex là viết lách tắt của 3 tính chất flex-grow flex-shrink và flex-basis. Nó như vậy này. flex: flex-grow flex-shrink flex-basis. Mặc tấp tểnh grow(0) shrink(1) và basis(auto).
Các các bạn coi ví dụ sau đây cả nhị đều sở hữu flex-basis như nhau. Nhưng tuy nhiên ở box1 thì lại sở hữu flex-grow:2 tức là box1 tiếp tục lâu năm gấp hai box2 Khi phạm vi container giãn nở ra. Nhưng box2 thì lại sở hữu flex-shrink:2 nghĩa là lúc container nhỏ xuống thì box2 tiếp tục co hẹp và đem chiều lâu năm vị 50% box1 đúng không nhỉ nhỉ ?
Chỗ này sao tuy nhiên rối loàn quá ? Sao vô hình GIF khi container giãn nở ra bản thân thấy box1 đem gấp hai box2 đâu hoặc Khi teo container lại box2 đem vị 50% box1 đâu. Đây đó là điểm luôn luôn thực hiện tôi cũng như chúng ta rối óc Khi thao tác với flexbox
Khi phối hợp 2 độ quý hiếm flex-shrink và flex-grow lại cùng nhau thì phức tạp lắm, không chỉ là là tỉ trọng về những số lượng đâu tuy nhiên là về vận tốc grow(giãn ra) hoặc shrink(co lại) nữa cơ. Nào nằm trong vô phần hóc búa phía bên dưới nha.
# Giải mến grow và shrink Khi kết hợp
Giả sử thuở đầu tao đem container có tính rộng lớn tối nhiều là 640px sau khoản thời gian đo lường bao hàm padding phía hai bên của container. Lúc này còn có 2 thành phần như phía trên đem flex-basis là 300px(bằng nhau về chiều rộng).
See the Pen CSS Flexbox shrink+grow by EvonDev (@blackzero) on CodePen.
Khi chúng ta resize trình duyệt lại sao cho tới container còn 430px thì thời điểm hiện tại tất cả chúng ta tiếp tục rơi rụng là 640 – 430 = 210px. Ô số 1 vì thế đem flex-shrink: 1 nên nó rơi rụng 70px(chiều rộng lớn của chính nó lúc này được xem là 300 – 70 = 230px), còn dù số 2 đem flex-shrink: 2 nên tiếp tục rơi rụng đi 140px(chiều rộng lớn sẽ vẫn 300 – 140x = 160px).
Các các bạn lại resize trình duyệt tiếp cho tới Khi phạm vi container xuống 340px thì tất cả chúng ta rơi rụng 640 – 340 = 300px. Ô số 1 đem flex-shrink: 1 nên tiếp tục rơi rụng 100px(còn 200px) còn dù số 2 tiếp tục rơi rụng 200px(còn 100px) vì thế đem flex-shrink: 2.
Tương tự động với flex-grow. Khi tăng phạm vi container lên 940px. Thì container được gia tăng 300px(640 + 300 = 940). Ô số 1 đem flex-grow: 2 nên tiếp tục tăng thêm thêm thắt 200px(tổng được xem là 500px) còn dù số 2 đem flex-grow: 1 nên tiếp tục cướp 1/3 là 100px nên nó sẽ bị gia tăng phạm vi 100px(tổng được xem là 400px).
Các chúng ta nên inspect những thành phần vô Codepen nhằm coi sự thay cho thay đổi. Khi phạm vi container hạ xuống đối với thuở đầu thì tất cả chúng ta tính theo đòi
flex-shrinkvà ngược lại Khi phạm vi container tăng thêm đối với thuở đầu thì tính theo đòiflex-grow. Phần tăng thêm hoặc hạ xuống của container tiếp tục phân chia tỉ trọng cho tớiflex-shrinkhoặcflex-growứng của những phần tử
Các các bạn coi hình GIF và Codepen kể từ từ mới mẻ thông được. Nếu khó khăn thông quá thì comment hoặc inbox cho bản thân mình. Mình tiếp tục trả lời cho tới nha.
See the Pen CSS Flexbox shrink+grow2 by EvonDev (@blackzero) on CodePen.
Xem thêm: nguyên tắc sắp xếp các nguyên tố trong bảng tuần hoàn
# Lời kết
Phù!!! Bài viết lách về css flexbox cho tới đấy là không còn. Các các bạn ráng học tập nhé. Có gì thiếu hiểu biết nhiều cứ comment hoặc thấy bản thân viết lách sai hoặc phân tích và lý giải sai thì hùn ý hùn bản thân nhằm bản thân nâng cấp lại cơ hội viết lách tương đương kiến thức và kỹ năng. Cám ơn chúng ta tiếp tục hiểu bài xích và chúc chúng ta một ngày chất lượng tốt lành lặn.
Bài viết lách đem xem thêm và hình hình họa lấy kể từ medium.freecodecamp.org
.
Bình luận