資訊專欄INFORMATION COLUMN
摘要：對(duì)于原有布局很多都是基于和這樣的布局，但是新一代問世后出現(xiàn)了現(xiàn)在風(fēng)靡的布局方案，其布局理解大大的迎合了現(xiàn)在前端開發(fā)中的布局需求什么是布局是的簡(jiǎn)稱，可以直觀的理解成彈性布局，是對(duì)盒子模型的一種靈活表現(xiàn)。
對(duì)于css原有布局很多都是基于float和display:table這樣的布局，但是新一代CSS3問世后出現(xiàn)了現(xiàn)在風(fēng)靡的flex布局方案，其布局理解大大的迎合了現(xiàn)在前端開發(fā)中的布局需求！
什么是Flex布局？
Flex?是Flexible Box Model的簡(jiǎn)稱，可以直觀的理解成“彈性布局”，是對(duì)盒子模型的一種靈活表現(xiàn)。
可以動(dòng)態(tài)修改子元素的寬度和高度！
參考W3Cschool教程解釋！
兼容性支持
-------------------------------------------開始學(xué)習(xí)！-------------------------------------------------------------
彈性盒子的父元素稱為??彈性容器??flex container
彈性盒子的子元素稱為??彈性子元素??flex item
還有兩個(gè)概念即主軸、側(cè)軸???如下圖：
（子元素沿著主軸依次排列，側(cè)軸與主軸相互垂直）
彈性容器屬性
fle-direction:row|row-reverse|column|column-reverse /*設(shè)置主軸方向確定彈性盒子子元素的排列方向*/
row（默認(rèn)值）
row-reverse
column
column-reverse
flex-wrap:nowrap|wrap|wrap-reverse /*當(dāng)子元素超出容器范圍時(shí)是否換行*/
nowrap（默認(rèn)值）
warp
wrap-reverse
flex-flow:[flex-direction]||[flex-wrap] /*設(shè)置彈性子元素排列方式*/ justify-content:flex-start|flex-end|center|space-between|space-around /*彈性盒子內(nèi)子元素在主軸上的對(duì)齊方式*/
flex-start（緊貼開始側(cè)）
flex-end（緊貼結(jié)束側(cè)）
center（居中對(duì)齊）
space-beteen（兩端對(duì)齊兩次緊貼）
space-around（均勻分布兩側(cè)有距離，左側(cè)距離是中間距離的0.5倍）
align-items:flex-star|flex-end|center|baseline|stretch /*設(shè)置彈性盒子子元素在側(cè)軸的對(duì)齊方式，與justify-content屬性類似 */
stretch（默認(rèn)、高度自動(dòng)延伸）
flex-star（從側(cè)軸開始）
flex-end（從側(cè)軸結(jié)束）
baseline（元素內(nèi)容基線對(duì)齊）
center（居中對(duì)齊，側(cè)軸中部）
align-content:flex-start|flex-end|center|space-between|space-around|stretch /*側(cè)軸有空白且有多行時(shí)，設(shè)置彈性盒子元素在側(cè)軸上的對(duì)齊方式*/
flex-start（元素多個(gè)且換行）
flex-end
center
space-between
space-around
stretch（高度鋪滿屏幕）
彈性盒子-子元素屬性
order:子元素排列順序，數(shù)值小的排在前面，可以為負(fù)值（子元素上設(shè)置）
flex-grow:設(shè)置子元素的擴(kuò)展比例，不允許負(fù)值，默認(rèn)為0（元素?cái)U(kuò)展）
flex-shrink:設(shè)置子元素的收縮比例，不允許負(fù)值，默認(rèn)為1（寬度收縮） flex-basis:彈性子元素的收縮基準(zhǔn)值，不允許負(fù)值
flex-none:none:復(fù)合屬性設(shè)置彈性子元素的分配空間
align-self:auto|flex-start|flex-end|center|baseline|srtech
多帶帶設(shè)置彈性子元素在側(cè)軸上的對(duì)齊方式，與align-items相同
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115892.html
摘要：通過閱讀發(fā)現(xiàn)了不少知識(shí)的盲點(diǎn)和誤解，對(duì)有了更深入的理解。總結(jié)幾點(diǎn)印象較深的體會(huì)，分享給大家。但是通過閱讀源碼改變了這種認(rèn)識(shí)模塊化很簡(jiǎn)單靈活，這是其優(yōu)點(diǎn)，同時(shí)也是一個(gè)缺點(diǎn)。 歡迎到個(gè)人博客參觀: 點(diǎn)擊這里 bootstrap已經(jīng)使用了很長(zhǎng)時(shí)間，但是從來沒有好好研究過其設(shè)計(jì)結(jié)構(gòu)，春節(jié)期間閑來無事就閱讀了源碼。通過閱讀發(fā)現(xiàn)了不少知識(shí)的盲點(diǎn)和誤解，對(duì)css有了更深入的理解?？偨Y(jié)幾點(diǎn)印象較深的體...
摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...
摘要：語法如下是簡(jiǎn)寫屬性，也可以分別定義行間隔和列間隔。語法如下屬性值得含義同這里不再過多說明，讀者可以自行驗(yàn)證。 前言 在上篇——JavaScript五十問——對(duì)比來說CSS的Grid與FlexBox（上篇），我介紹了Flex的屬性與使用，今天我們來總結(jié)一下Grid的具體使用方法，最后會(huì)結(jié)合Flex與Grid布局講一講二者的聯(lián)系與不同。 需要注意得是，Grid布局與我們之前所熟悉的css布...
摘要：這個(gè)接受三個(gè)參數(shù)表示柵格數(shù)目默認(rèn)為默認(rèn)為表示斷點(diǎn)設(shè)置，這是一個(gè)全局變量，為類型。 你可能已經(jīng)聽說了一個(gè)大新聞：Bootstrap4 合并了代號(hào)為#21389的PR，宣布放棄支持IE9，并默認(rèn)使用flexbox彈性盒模型。這標(biāo)志著：1）前端開發(fā)全面步入現(xiàn)代瀏覽器的時(shí)代進(jìn)一步來臨；2）樣式處理也再一次面向未來，擁抱更加靈活的彈性盒模型－Flex布局。 這篇文章會(huì)帶你深入Bootstrap最...
摘要：這個(gè)接受三個(gè)參數(shù)表示柵格數(shù)目默認(rèn)為默認(rèn)為表示斷點(diǎn)設(shè)置，這是一個(gè)全局變量，為類型。 你可能已經(jīng)聽說了一個(gè)大新聞：Bootstrap4 合并了代號(hào)為#21389的PR，宣布放棄支持IE9，并默認(rèn)使用flexbox彈性盒模型。這標(biāo)志著：1）前端開發(fā)全面步入現(xiàn)代瀏覽器的時(shí)代進(jìn)一步來臨；2）樣式處理也再一次面向未來，擁抱更加靈活的彈性盒模型－Flex布局。 這篇文章會(huì)帶你深入Bootstrap最...
閱讀 2634·2021-11-15 11:38
閱讀 2645·2021-11-04 16:13
閱讀 18198·2021-09-22 15:07
閱讀 1062·2019-08-30 15:55
閱讀 3289·2019-08-30 14:15
閱讀 1698·2019-08-29 13:59
閱讀 3252·2019-08-28 18:28
閱讀 1612·2019-08-23 18:29
