CSS中flex和inline-flex的區(qū)別詳解
發(fā)布時間:2020-08-31 16:12:38 作者:早起的年輕人-趙
我要評論

這篇文章主要介紹了CSS中flex和inline-flex的區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
inline-flex 和 inline-block 一樣,對內(nèi)部元素來說是個 display:flex 的容器,對外部元素來說是個 inline 的塊。
兩者的區(qū)別描述:
- flex: 將對象作為彈性伸縮盒顯示
- inline-flex:將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示
一句話來描述就是 當Flex Box 容器沒有設置寬度大小限制時,當display 指定為 flex 時,F(xiàn)lexBox 的寬度會填充父容器,當display指定為 inline-flex 時,F(xiàn)lexBox的寬度會包裹子Item,如下圖所示:
對應的代碼如下所示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*Flex 容器*/ .flex__container { display: inline-flex; background-color: gray; } /*Flex 子 Item */ .flex__item { width: 50px; height: 50px; background-color: aqua; border: 1px solid black; } </style> </head> <body> <!--Flex容器--> <div class="flex__container"> <!--Flex容器中的子Item--> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div> <div class="flex__item"></div> </div> </body> </html>
到此這篇關于CSS中flex和inline-flex的區(qū)別詳解的文章就介紹到這了,更多相關CSS flex和inline-flex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
相關文章
詳解CSS中的display:flex||inline-flex屬性
這篇文章主要給大家介紹了CSS中的display:flex和display:inline-flex屬性,文中分別通過兩段實例代碼給大家介紹了display:flex和display:inline-flex的使用效果,感興趣的2016-12-20