成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

flex基礎(chǔ)布局詳解

luodongseu / 3224人閱讀

摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁(yè)面所具有的元素可分為類(lèi)。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。

flex-tutorials

系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章

flex基礎(chǔ)理念 
使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。一個(gè)彈性框容器將延展它的子元素以填充可用空間，并且縮小它的子元素來(lái)避免溢出。
flex屬性

一個(gè)flex布局的頁(yè)面所具有的元素可分為2類(lèi)。
1、彈性容器
2、彈性元素（包含在彈性容器內(nèi)的元素）

彈性容器

彈性容器擁有橫軸(main)和縱軸(cross)2種方向來(lái)決定著整體flex布局的流向，默認(rèn)布局：橫軸從左(main start)到右(main end)，縱軸從上(cross start)到下(cross end)

圖片來(lái)自MDN

彈性容器還有相應(yīng)的CSS屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction 
指定了內(nèi)部元素是如何在 flex 容器中布局的，定義了主軸的方向(正方向或反方向)。

可選值有4種
row：默認(rèn)，保持原布局不變，按照橫軸方向布局，即從左(main start)到右(main end)
row-reverse：按照橫方向布局，置換橫默認(rèn)方向，即從右(main end)到左(main start)
column： 按照縱軸默認(rèn)方向布局，即從上(cross start)到下(cross end)
column-reverse：按照縱軸方向布局，置換縱軸默認(rèn)方向，即從下(cross start)到上(cross end)

demo

注：flex-direction的值即為整個(gè)flex布局的主軸，flex-direction:row | row-reverse則于橫軸為主軸，flex-direction:column | column-reverse則于縱軸為主軸，另外的為側(cè)軸

flex-wrap 
指定 flex 元素單行顯示還是多行顯示 。如果允許換行，這個(gè)屬性允許你控制行的堆疊方向

可選值有3種
nowrap： 默認(rèn)，單行顯示，假如寬度溢出，則自動(dòng)壓縮相應(yīng)元素的寬度（壓縮比例與flex-shrink相關(guān)），保持單行
wrap： 多行顯示，假如寬度溢出，自動(dòng)換行
wrap-reverse：多行顯示，置換側(cè)軸的方向

demo

flex-flow 
flex-direction 和 flex-wrap 的簡(jiǎn)寫(xiě)
.class{
    flex-flow: column-reverse wrap;/*默認(rèn)屬性*/
}
justify-content 
屬性定義彈性元素在主軸方向的排列

可選值有5個(gè)

flex-start： 默認(rèn)值，按照主軸方向進(jìn)行排列
flex-end： 置換主軸方向進(jìn)行排列
center： 向中點(diǎn)居中排列
space-between： 在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。
space-around：在主軸上均勻分配彈性元素。相鄰元素間距離相同。每行第一個(gè)元素到行首的距離和每行最后一個(gè)元素到行尾的距離將會(huì)是相鄰元素之間距離的一半。

demo1
demo2

align-items 
屬性定義了彈性元素在側(cè)軸方向的排列

可選值有5個(gè)
flex-start： 默認(rèn)值，按照側(cè)軸方向排列
flex-end： 置換側(cè)軸方向進(jìn)行排列，主軸不變
center： 向中點(diǎn)居中排列
baseline： 所有元素向基線(xiàn)對(duì)齊。側(cè)軸起點(diǎn)到元素基線(xiàn)距離最大的元素將會(huì)于側(cè)軸起點(diǎn)對(duì)齊以確定基線(xiàn)(不是很明白，MDN上面的解釋)
stretch：拉伸彈性元素，填充側(cè)軸空間

demo

align-content 
屬性定義了當(dāng)彈性元素超過(guò)一行時(shí)，元素在縱軸上的排列方式

可選值有6個(gè)
flex-start： 默認(rèn)值，緊貼前一行，第一行緊貼邊緣，與主軸排列方式有關(guān)
flex-end： 置換側(cè)軸方向進(jìn)行排列，緊貼前一行
center： 向中點(diǎn)居中排列，緊貼前一行
space-between： 所有行在容器中平均分布。相鄰兩行間距相等。容器的垂直軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的邊對(duì)齊
space-around：所有行在容器中平均分布，相鄰兩行間距相等。容器的垂直軸起點(diǎn)邊和終點(diǎn)邊分別與第一行和最后一行的距離是相鄰兩行間距的一半
stretch：平均分配側(cè)軸空間，相鄰行間距相等

demo

彈性元素

包含在彈性容器里的每個(gè)節(jié)點(diǎn)都可以稱(chēng)為彈性元素

相應(yīng)的，彈性元素也有自身的CSS屬性

order

align-self

flex-grow

flex-shrink

flex-basis

order 
彈性元素根據(jù)自身order的值來(lái)進(jìn)行排序

demo

align-self 
屬性和左右與align-items相同，但由于是直接作用在彈性元素上面，優(yōu)先級(jí)比align-items高

demo

flex-grow 
定義彈性元素側(cè)軸拉伸因子

demo

flex-shrink 
與flex-grow相反，定義彈性元素的壓縮比例，當(dāng)彈性元素的總長(zhǎng)度超過(guò)容器長(zhǎng)度時(shí)，各自的壓縮率(默認(rèn)是1)

demo

flex-basis 
用來(lái)代替width，優(yōu)先級(jí)比width高（如果flex-basis和width有一個(gè)值為auto，那么另外一個(gè)非auto優(yōu)先級(jí)更高）

demo

flex 
flex-grow、flex-shrink、flex-basis的縮寫(xiě)
.flex1{
    flex:none;
    /*
    相當(dāng)于
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex2{
    flex:1;
    /*
    相當(dāng)于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    */
}

.flex3{
    flex: 1 30px;
    /*
    相當(dāng)于
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 30px;
    */
}
參考來(lái)源

MDN
W3C

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50549.html

相關(guān)文章

  • flex基礎(chǔ)布局詳解

    摘要：系統(tǒng)性的介紹關(guān)于布局，也作為自學(xué)的一篇文章基礎(chǔ)理念使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充屏幕可用空間。屬性一個(gè)布局的頁(yè)面所具有的元素可分為類(lèi)。每行第一個(gè)元素與行首對(duì)齊，每行最后一個(gè)元素與行尾對(duì)齊。 flex-tutorials 系統(tǒng)性的介紹關(guān)于flex布局，也作為自學(xué)的一篇文章 flex基礎(chǔ)理念 使用彈性盒子的意義是在任何尺寸的屏幕上改變其和其子元素的尺寸填充...

    nemo 評(píng)論0 收藏0

  • CSS實(shí)例詳解：Flex布局

    摘要：本文由云社區(qū)發(fā)表本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下布局是如何解決布局問(wèn)題。通過(guò)對(duì)比其他的實(shí)現(xiàn)方式，可以看出使用布局可以?xún)?yōu)雅地實(shí)現(xiàn)相同的布局問(wèn)題。 本文由云+社區(qū)發(fā)表 本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下Flex布局是如何解決CSS布局問(wèn)題。 一．垂直居中 這里同時(shí)用非flex布局和flex布局兩種方式來(lái)實(shí)現(xiàn)，可以對(duì)比兩種實(shí)現(xiàn)方式...

    RobinQu 評(píng)論0 收藏0

  • CSS實(shí)例詳解：Flex布局

    摘要：本文由云社區(qū)發(fā)表本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下布局是如何解決布局問(wèn)題。通過(guò)對(duì)比其他的實(shí)現(xiàn)方式，可以看出使用布局可以?xún)?yōu)雅地實(shí)現(xiàn)相同的布局問(wèn)題。 本文由云+社區(qū)發(fā)表 本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下Flex布局是如何解決CSS布局問(wèn)題。 一．垂直居中 這里同時(shí)用非flex布局和flex布局兩種方式來(lái)實(shí)現(xiàn)，可...

    Meathill 評(píng)論0 收藏0

  • CSS實(shí)例詳解：Flex布局

    摘要：本文由云社區(qū)發(fā)表本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下布局是如何解決布局問(wèn)題。通過(guò)對(duì)比其他的實(shí)現(xiàn)方式，可以看出使用布局可以?xún)?yōu)雅地實(shí)現(xiàn)相同的布局問(wèn)題。 本文由云+社區(qū)發(fā)表 本文將通過(guò)三個(gè)簡(jiǎn)單的實(shí)例，實(shí)際應(yīng)用上篇文章的基礎(chǔ)理論知識(shí)，展示下Flex布局是如何解決CSS布局問(wèn)題。 一．垂直居中 這里同時(shí)用非flex布局和flex布局兩種方式來(lái)實(shí)現(xiàn)，可以對(duì)比兩種實(shí)現(xiàn)方式...

    Magicer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<