認識flexbox布局

fasss 發布于2019-08-30 14:15 / 3273人閱讀

摘要：對于原有布局很多都是基于和這樣的布局，但是新一代問世后出現了現在風靡的布局方案，其布局理解大大的迎合了現在前端開發中的布局需求什么是布局是的簡稱，可以直觀的理解成彈性布局，是對盒子模型的一種靈活表現。

對于css原有布局很多都是基于float和display:table這樣的布局，但是新一代CSS3問世后出現了現在風靡的flex布局方案，其布局理解大大的迎合了現在前端開發中的布局需求！

什么是Flex布局？

Flex?是Flexible Box Model的簡稱，可以直觀的理解成“彈性布局”，是對盒子模型的一種靈活表現。
可以動態修改子元素的寬度和高度！

參考W3Cschool教程解釋！

兼容性支持

-------------------------------------------開始學習！-------------------------------------------------------------

彈性盒子的父元素稱為??彈性容器??flex container
彈性盒子的子元素稱為??彈性子元素??flex item
還有兩個概念即主軸、側軸???如下圖：
（子元素沿著主軸依次排列，側軸與主軸相互垂直）

彈性容器屬性

fle-direction:row|row-reverse|column|column-reverse
/*設置主軸方向確定彈性盒子子元素的排列方向*/

row（默認值）

row-reverse

column

column-reverse

flex-wrap:nowrap|wrap|wrap-reverse
/*當子元素超出容器范圍時是否換行*/

nowrap（默認值）

warp

wrap-reverse

flex-flow:[flex-direction]||[flex-wrap]
/*設置彈性子元素排列方式*/
justify-content:flex-start|flex-end|center|space-between|space-around
/*彈性盒子內子元素在主軸上的對齊方式*/

flex-start（緊貼開始側）

flex-end（緊貼結束側）

center（居中對齊）

space-beteen（兩端對齊兩次緊貼）

space-around（均勻分布兩側有距離，左側距離是中間距離的0.5倍）

align-items:flex-star|flex-end|center|baseline|stretch
/*設置彈性盒子子元素在側軸的對齊方式，與justify-content屬性類似 */

stretch（默認、高度自動延伸）

flex-star（從側軸開始）

flex-end（從側軸結束）

baseline（元素內容基線對齊）

center（居中對齊，側軸中部）

align-content:flex-start|flex-end|center|space-between|space-around|stretch
/*側軸有空白且有多行時，設置彈性盒子元素在側軸上的對齊方式*/

flex-start（元素多個且換行）

flex-end

center

space-between

space-around

stretch（高度鋪滿屏幕）

彈性盒子-子元素屬性

order:子元素排列順序，數值小的排在前面，可以為負值（子元素上設置）
flex-grow:設置子元素的擴展比例，不允許負值，默認為0（元素擴展）
flex-shrink:設置子元素的收縮比例，不允許負值，默認為1（寬度收縮） flex-basis:彈性子元素的收縮基準值，不允許負值
flex-none:none:復合屬性設置彈性子元素的分配空間
align-self:auto|flex-start|flex-end|center|baseline|srtech
多帶帶設置彈性子元素在側軸上的對齊方式，與align-items相同

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115892.html

bootstrap4源碼閱讀體會

摘要：通過閱讀發現了不少知識的盲點和誤解，對有了更深入的理解。總結幾點印象較深的體會，分享給大家。但是通過閱讀源碼改變了這種認識模塊化很簡單靈活，這是其優點，同時也是一個缺點。歡迎到個人博客參觀: 點擊這里 bootstrap已經使用了很長時間，但是從來沒有好好研究過其設計結構，春節期間閑來無事就閱讀了源碼。通過閱讀發現了不少知識的盲點和誤解，對css有了更深入的理解。總結幾點印象較深的體...

incredible 2019-08-30 12:45 評論0 收藏0
CSS及布局

摘要：經過半年的打磨，正式發布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發做好準備。這兩種方式實現的瀑布流式布局均支持首屏和網頁窗口大小改變時的列數自適應。主要是對于標準里的布局方式草案中的布局方式進行一些總結。一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看...

jaysun 2019-08-29 14:04 評論0 收藏0
JavaScript五十問——對比來說CSS的Grid與FlexBox（下篇）

摘要：語法如下是簡寫屬性，也可以分別定義行間隔和列間隔。語法如下屬性值得含義同這里不再過多說明，讀者可以自行驗證。前言在上篇——JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇），我介紹了Flex的屬性與使用，今天我們來總結一下Grid的具體使用方法，最后會結合Flex與Grid布局講一講二者的聯系與不同。需要注意得是，Grid布局與我們之前所熟悉的css布...

Moxmi 2019-08-30 15:55 評論0 收藏0
深入新版BS4源碼探索flex和工程化sass奧秘

摘要：這個接受三個參數表示柵格數目默認為默認為表示斷點設置，這是一個全局變量，為類型。你可能已經聽說了一個大新聞：Bootstrap4 合并了代號為#21389的PR，宣布放棄支持IE9，并默認使用flexbox彈性盒模型。這標志著：1）前端開發全面步入現代瀏覽器的時代進一步來臨；2）樣式處理也再一次面向未來，擁抱更加靈活的彈性盒模型－Flex布局。這篇文章會帶你深入Bootstrap最...

evin2016 2019-08-21 11:30 評論0 收藏0
深入新版BS4源碼探索flex和工程化sass奧秘

摘要：這個接受三個參數表示柵格數目默認為默認為表示斷點設置，這是一個全局變量，為類型。你可能已經聽說了一個大新聞：Bootstrap4 合并了代號為#21389的PR，宣布放棄支持IE9，并默認使用flexbox彈性盒模型。這標志著：1）前端開發全面步入現代瀏覽器的時代進一步來臨；2）樣式處理也再一次面向未來，擁抱更加靈活的彈性盒模型－Flex布局。這篇文章會帶你深入Bootstrap最...

silencezwm 2019-08-30 15:52 評論0 收藏0