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

資訊專欄INFORMATION COLUMN

flex布局-學(xué)習(xí)

hedzr / 2497人閱讀

摘要：今天上網(wǎng)找了下各種的博文學(xué)習(xí)了一番資料如下阮一峰的網(wǎng)絡(luò)日志年提出了布局特點(diǎn)是簡(jiǎn)便完整響應(yīng)式兼容性如下查詢鏈接介紹意思為彈性布局任何一容器都可以指定為布局甚至行內(nèi)元素也可以但是由于支持的情況各不相同我們還是需要對(duì)屬性做兼容性處理如加上

今天,上網(wǎng)找了下各種flex的博文學(xué)習(xí)了一番,資料如下:
阮一峰的網(wǎng)絡(luò)日志
Dive into Flexbox
2009年,W3C提出了---Flex布局,特點(diǎn)是

簡(jiǎn)便

完整

響應(yīng)式

兼容性如下
查詢鏈接

介紹

Flex(Flexible Box),意思為"彈性布局"
任何一容器都可以指定為Flex布局,甚至行內(nèi)元素也可以

.box{
    display:flex;
}
.box{
    display:inline-flex;
}

但是由于支持的情況各不相同,我們還是需要對(duì)屬性做兼容性處理如加上-webkit-前綴等.

失效特性

float

clear

vertical-align

理解

容器采用flex布局后,就被稱為flex容器(flex container),子元素被稱為容器成員,為flex項(xiàng)目(flex item)
對(duì)于flex布局其實(shí)理解下圖即可

容器中默認(rèn)有兩根軸,主軸(main axis)和cross axis(交叉軸)
開(kāi)始結(jié)束位置分別為main/cross start和main/cross end
排列的順序?yàn)閙ain/cross direction.
flex item占據(jù)main axis上空間為main size,占據(jù)cross axis上的空間為cross size.
flex屬性 容器屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction
用于改變flex容器的軸線,默認(rèn)值為row

row(default)

row-reverse(就和后綴一樣,為main axies反向排列)

column(改變軸線為cross axies,為cross axies方向排列)

column-reverse(同理改變軸線,cross axies方向反向排列)

justify-content
用于改變flex容器中flex item在軸線上的位置

flex-start(default,從axies start開(kāi)始緊靠排列)

flex-end(axies end端緊靠排列)

center(展現(xiàn)如其名,axies中間)

space-between(相當(dāng)于將空間等分,每份空間中flex-start排列)

space-around(空間等分,每份空間中center排列)

align-items
為justify-content的補(bǔ)充屬性,為flex item在非flex-direction指定的另一軸線的位置

flex-start(default)

flex-end

center
以上三種也就不贅述啦

stretch (如同屬性名一樣,將元素在軸向上伸展開(kāi)來(lái),注意在固定了height的情況下不會(huì)拉伸)

baseline (定位線為item中第一行文字的底部線,根據(jù)該線進(jìn)行定位,也就是基線對(duì)齊,取距離start最長(zhǎng)的基線對(duì)齊)
值得注意的是屬性值baseline,其基線的定義需要進(jìn)一步了解

鏈接:
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/2016/CR...
https://www.w3.org/TR/css-fle...
其中基線定義會(huì)根據(jù)情況不同而變化,通常情況下為第一項(xiàng)的底線(文字底部/圖片底部),無(wú)內(nèi)容的flex item為flex item底部border線.

flex-wrap
直到現(xiàn)在為止,每個(gè)Flex 容器只有一條Flex Line,使用flex-wrap,我們能創(chuàng)建一個(gè)擁有多條Flex Line的Flex 容器

nowrap(default)

wrap

wrap-reverse
設(shè)置為wrap時(shí),假如我們一行空間不夠,我們的flex item在空間不足時(shí)會(huì)進(jìn)行換行.創(chuàng)建新的一行.

設(shè)置為wrap-reverse時(shí),在wrap換行效果的同時(shí),將會(huì)反向展現(xiàn)

align-content
該屬性定義了flex-wrap的行為,這和align-item有點(diǎn)相似,但是和其不同的是該屬性align的是Flex Line.

stretch(default)

flex-start

flex-end

center

space-between

space-around
看到他們其實(shí)大概就知道是怎么回事啦,這里也就不多說(shuō)了,其實(shí)想象一下就知道了,主要是用于設(shè)置行/列位置的屬性

flex-flow
= flex-direction + flex-wrap
用于快速設(shè)置上述兩個(gè)屬性.

項(xiàng)目(item)屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

值得注意的屬性
margin
在flex布局中,margin:auto是一個(gè)很有用的屬性,設(shè)置后會(huì)自動(dòng)吸收多余的空間,可以利用flex item的該屬性進(jìn)行多樣化的布局.

order
設(shè)置元素的順序,數(shù)值越小,排列越前,默認(rèn)為0

flex-grow
為放大比例,默認(rèn)為0

flex-shrink
定義了縮小比例,默認(rèn)為1,即如果空間不足,項(xiàng)目將會(huì)縮小
所有項(xiàng)目為1時(shí),空間不足,都會(huì)縮小,如果你不希望某個(gè)容器在任何時(shí)候都不被壓縮，那設(shè)置flex-shrink:0;數(shù)值代表被縮小的程度
!負(fù)值無(wú)效者縮小

flex-basis
在分配多余空間前,項(xiàng)目占據(jù)的主軸的空間,瀏覽器將根據(jù)該屬性,計(jì)算主軸空間是否有多余空間.

auto(default)

設(shè)定為width/height一樣的值如50px,即固定項(xiàng)目占據(jù)的空間

flex
順序?yàn)?flex-grow flex-shrink flex-basis,默認(rèn)為0 1 auto,后兩個(gè)屬性為可選選項(xiàng)
auto(1 1 auto)/none(0 0 auto)

align-self
用于覆蓋Flex容器中的align-items屬性,它有和align-items相同的屬性值

auto(繼承align-items屬性,無(wú)父元素則等同于stretch)

stretch

flex-start

flex-end

center

baseline

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

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

相關(guān)文章

  • FlexBox學(xué)習(xí) 彈性布局_019

    摘要：學(xué)習(xí)彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發(fā)生，而不影響該空間分布的其他行。同時(shí)，布局空白對(duì)于元素的對(duì)齊行為也是很重要的。這會(huì)使該元素延展，并占據(jù)此方向軸上的布局空白。 FlexBox學(xué)習(xí) 彈性布局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。 一維...

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

  • FlexBox學(xué)習(xí) 彈性布局_019

    摘要：學(xué)習(xí)彈性布局模型，通常被稱為，是一種一維的布局模型。任何空間分布都將在該行上發(fā)生，而不影響該空間分布的其他行。同時(shí)，布局空白對(duì)于元素的對(duì)齊行為也是很重要的。這會(huì)使該元素延展，并占據(jù)此方向軸上的布局空白。 FlexBox學(xué)習(xí) 彈性布局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。 一維...

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

  • 微信小程序開(kāi)發(fā)必備必看常用的Flex布局模式－wxflex

    摘要：首發(fā)地址微信小程序的布局種必備常用的布局模式代碼庫(kù)地址官方建議的布局的布局相比傳統(tǒng)的布局來(lái)說(shuō)，簡(jiǎn)單快捷方便。 首發(fā)地址:http://weappdev.com/t/flex-wx... wxflex 微信小程序的Flex布局demo－4種必備常用的Flex布局模式 代碼庫(kù) github地址：https://github.com/icindy/wxflex 官方建議的Flex布局 Fle...

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

  • 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

    摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺(jué)自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺(jué)自己知道，可是實(shí)際上自己并不是真的理解了...

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

  • 學(xué)習(xí)關(guān)于display ：flex 布局問(wèn)題！

    摘要：什么是呢答是的縮寫(xiě)，意為彈性布局這個(gè)東西的引入，為盒模型提供了最大的靈活性可以相應(yīng)式的實(shí)現(xiàn)各種頁(yè)面的布局。基本概念采用布局的元素，稱為容器，簡(jiǎn)稱容器。在這個(gè)容器中默認(rèn)存在兩個(gè)軸水平方向的主軸和垂直方向上的交叉軸。 很多人不明白這個(gè)display:flex是到底是什么東西，如何使用的 。 1.什么是display：flex呢？ 答：flex是 flexible box的縮寫(xiě)，意為彈性布局 ；...

    番茄西紅柿 評(píng)論0 收藏0

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

0條評(píng)論

hedzr

男|高級(jí)講師

TA的文章

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