認識flexbox布局

fasss 發(fā)布于2019-08-30 14:15 / 3260人閱讀

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

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

什么是Flex布局？

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

參考W3Cschool教程解釋！

兼容性支持

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

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

彈性容器屬性

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
/*彈性盒子內(nèi)子元素在主軸上的對齊方式*/

flex-start（緊貼開始側(cè)）

flex-end（緊貼結(jié)束側(cè)）

center（居中對齊）

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

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

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

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

flex-star（從側(cè)軸開始）

flex-end（從側(cè)軸結(jié)束）

baseline（元素內(nèi)容基線對齊）

center（居中對齊，側(cè)軸中部）

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

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

flex-end

center

space-between

space-around

stretch（高度鋪滿屏幕）

彈性盒子-子元素屬性

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115892.html

bootstrap4源碼閱讀體會

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

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

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

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

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

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

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

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

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

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