介紹
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。
flex： 將對象作為彈性伸縮盒顯示
inline-flex：將對象作為內聯塊級彈性伸縮盒顯示
flex示例代碼
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .main{ width:200px; background-color: red; display: flex;/*父div設置該屬性*/ } .main>div{ width: 50px; height: 50px; border: 1px solid blue; box-sizing: border-box;/*這是css3屬性，如果不懂，請繼續往下閱讀*/ /*float:left;這個屬性就不需要了，會自動浮動*/ } </style></head><body> <div class="main"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div></body></html> |
效果圖如下：
display:inline-flex示例代碼
如果想看到效果，將上面的display:flex,換成display:inline-flex,并且將width:200px刪除。在沒有測試之前，有的人可能會認為.main會占據整個一行，但是，測試結果是，它會根據子元素所有的div大小自適應寬度和高度
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Test</title> <style type="text/css"> .main{ background-color: red; display: inline-flex;/*父div設置該屬性*/ } .main>div{ width: 50px; height: 50px; border: 1px solid blue; box-sizing: border-box;/*這是css3屬性，如果不懂，請繼續往下閱讀*/ /*float:left;這個屬性就不需要了，會自動浮動*/ } </style></head><body> <div class="main"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div></body></html> |
效果圖如下：
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
