父級開啟flex,子級寬度不被壓縮情況
阿新 • • 發佈：2020-09-07
1，如果父級開啟了flex,子級元素的寬度相加大於父級，那麼子級元素的寬度會被壓縮
2.不讓子級的寬度壓縮
方法一，在子級新增flex-shrink:0; 值為0不被壓縮，
方法二，在其中的一個子級新增一個子級，有寬高，也就是box的孫級，此時box2也不會壓縮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 230px; height: 200px; border: 1px solid red; display: flex;} .box1{ width: 100px; height: 100px; background-color: skyblue; flex-shrink: 0; } .box2{ width: 100px; height: 100px; background-color: hotpink; } .box2 .inner{ width: 100px; height: 100px; } .box3{ width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"> <div class="inner"></div> </div> <div class="box3"></div> </div> </body> </html>