問題一；
1.，display:flex;不會讓容器本身取消它的塊裝的屬性，但它的子元素會變成行內塊的的屬性
2.display: inline-flex;父級是變成行內塊元素，他的子元素也是行內塊元素，並且自動換行
<!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> .content { width: 200px; border: 1px solid; box-sizing: border-box; //display:flex } .a { width: 25%; height: 100px; /* 對外是快元素，對內是行內塊元素 */ /* display: flex; */ /* 對外和對內是行內塊元素 */ display: inline-flex; flex-direction: column; } img { width: 50px; height: 50px; } i { font-size: 12px; } </style> </head> <body> <div class="content"> <div class="a"> <img src="http://yanxuan.nosdn.127.net/749f0ba087d2035b6d2937b4919952de.png" alt="" /> <i>春夏秋冬</i> </div> <div class="a"> <img src="http://yanxuan.nosdn.127.net/749f0ba087d2035b6d2937b4919952de.png" alt="" /> <i>春夏秋冬</i> </div> <div class="a"> <img src="http://yanxuan.nosdn.127.net/749f0ba087d2035b6d2937b4919952de.png" alt="" /> <i>春夏秋冬</i> </div> <div class="a"> <img src="http://yanxuan.nosdn.127.net/749f0ba087d2035b6d2937b4919952de.png" alt="" /> <i>春夏秋冬</i> </div> <div class="a"> <img src="http://yanxuan.nosdn.127.net/749f0ba087d2035b6d2937b4919952de.png" alt="" /> <i>春夏秋冬</i> </div> <div class="a"> <img src="http://yanxuan.nosdn.127.net/749f0ba087d2035b6d2937b4919952de.png" alt="" /> <i>春夏秋冬</i> </div> </div> </body> </html>
開啟inline-flex
開啟flex
2,如果類a開啟flex,還要讓類a變成行內快元素，那么給類a的父級content開啟display:flex
效果如下
此時注意，
2.1. 如果類a沒有image,那么類a的寬度超過了父元素的寬度，每個類a都會被壓縮寬度
2.2，但是類a中有image，有寬高，那么類a不會被壓縮