国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS flex 布局屬性詳解

voyagelab / 2369人閱讀

摘要:簡(jiǎn)介是的縮寫,意為彈性布局,用來為盒狀模型提供最大的靈活性。注意,設(shè)為布局以后,子元素的和屬性將失效。基本概念采用布局的元素,稱為容器,簡(jiǎn)稱容器。它的所有子元素自動(dòng)成為容器成員,稱為項(xiàng)目,簡(jiǎn)稱項(xiàng)目。負(fù)值對(duì)該屬性無效。后兩個(gè)屬性可選。

簡(jiǎn)介:

Flex是Flexible?Box的縮寫,意為”彈性布局”,用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局。
注意,設(shè)為Flex布局以后,子元素的float、clear和vertical-align屬性將失效。

基本概念

采用Flex布局的元素,稱為Flex容器(flex?container),簡(jiǎn)稱”容器”。它的所有子元素自動(dòng)成為容器成員,稱為Flex項(xiàng)目(flex?item),簡(jiǎn)稱”項(xiàng)目”。
容器默認(rèn)存在兩根軸:水平的主軸(main?axis)和垂直的交叉軸(cross?axis)。主軸的開始位置(與邊框的交叉點(diǎn))叫做main?start,結(jié)束位置叫做main?end;交叉軸的開始位置叫做cross?start,結(jié)束位置叫做cross?end。

容器屬性 1.flex-direction

flex-direction屬性決定主軸的方向(即項(xiàng)目的排列方向)
flex-direction:?row?|?row-reverse?|?column?|?column-reverse
????row(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端。
????row-reverse:主軸為水平方向,起點(diǎn)在右端。
????column:主軸為垂直方向,起點(diǎn)在上沿。
????column-reverse:主軸為垂直方向,起點(diǎn)在下沿。

2.flex-wrap

flex-wrap默認(rèn)情況下,項(xiàng)目都排在一條線(又稱”軸線”)上。flex-wrap屬性定義,如果一條軸線排不下,如何換行.
flex-wrap:?nowrap?|?wrap?|?wrap-reverse;
????nowrap(默認(rèn)):不換行。
????wrap:換行,第一行在上方。
????wrap-reverse:換行,第一行在下方。

3.flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式,默認(rèn)值為row?nowrap。
flex-flow:??||?;

4.justify-content

justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
justify-content:?flex-start?|?flex-end?|?center?|?space-between?|?space-around;
????flex-start(默認(rèn)值):左對(duì)齊
????flex-end:右對(duì)齊
????center:?居中
????space-between:兩端對(duì)齊,項(xiàng)目之間的間隔都相等。
????space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

5.align-items

align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊。
align-items:?flex-start?|?flex-end?|?center?|?baseline?|?stretch;
????flex-start:交叉軸的起點(diǎn)對(duì)齊。
????flex-end:交叉軸的終點(diǎn)對(duì)齊。
????center:交叉軸的中點(diǎn)對(duì)齊。
????baseline:?項(xiàng)目的第一行文字的基線對(duì)齊。
????stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度。

6.align-content

align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線,該屬性不起作用.
align-content:?flex-start?|?flex-end?|?center?|?space-between?|?space-around?|?stretch;
????flex-start:與交叉軸的起點(diǎn)對(duì)齊。
????flex-end:與交叉軸的終點(diǎn)對(duì)齊。
????center:與交叉軸的中點(diǎn)對(duì)齊。
????space-between:與交叉軸兩端對(duì)齊,軸線之間的間隔平均分布。
????space-around:每根軸線兩側(cè)的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
????stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸。

項(xiàng)目屬性 1.order

order屬性定義項(xiàng)目的排列順序。數(shù)值越小,排列越靠前,默認(rèn)為0。

2.flex-grow

flex-grow屬性定義項(xiàng)目的放大比例,默認(rèn)為0,即如果存在剩余空間,也不放大。
如果所有項(xiàng)目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個(gè)項(xiàng)目的flex-grow屬性為2,其他項(xiàng)目都為1,則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。
*可以用來實(shí)現(xiàn)兩分、三分布局

3.flex-shrink

flex-shrink屬性定義了項(xiàng)目的縮小比例,默認(rèn)為1,即如果空間不足,該項(xiàng)目將縮小。
如果所有項(xiàng)目的flex-shrink屬性都為1,當(dāng)空間不足時(shí),都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0,其他項(xiàng)目都為1,則空間不足時(shí),前者不縮小。
負(fù)值對(duì)該屬性無效。

4.flex-basis

flex-basis屬性定義了在分配多余空間之前,項(xiàng)目占據(jù)的主軸空間(main?size)。瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間。它的默認(rèn)值為auto,即項(xiàng)目的本來大小。
它可以設(shè)為跟width或height屬性一樣的值(比如350px),則項(xiàng)目將占據(jù)固定空間。

5.flex

flex屬性是flex-grow,?flex-shrink?和?flex-basis的簡(jiǎn)寫,默認(rèn)值為0?1?auto。后兩個(gè)屬性可選。
該屬性有兩個(gè)快捷值:auto?(1?1?auto)?和?none?(0?0?auto)。
建議優(yōu)先使用這個(gè)屬性,而不是多帶帶寫三個(gè)分離的屬性,因?yàn)闉g覽器會(huì)推算相關(guān)值。

6.align-self

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋align-items屬性。默認(rèn)值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/113689.html

相關(guān)文章

  • 詳解CSSFlex布局

    摘要:本文由云社區(qū)發(fā)表是的縮寫,意為彈性布局,是的一種布局模式。通過布局,可以很優(yōu)雅地解決很多布局的問題。與交叉軸兩端對(duì)齊,軸線之間的間隔平均分布。表示當(dāng)空間不足時(shí),不縮小。此文已由作者授權(quán)騰訊云社區(qū)發(fā)布 本文由云+社區(qū)發(fā)表 Flex是Flexible Box 的縮寫,意為彈性布局,是CSS3的一種布局模式。通過Flex布局,可以很優(yōu)雅地解決很多CSS布局的問題。下面會(huì)分別介紹容器的6個(gè)屬性和項(xiàng)...

    番茄西紅柿 評(píng)論0 收藏0
  • 詳解CSSFlex布局

    摘要:本文由云社區(qū)發(fā)表是的縮寫,意為彈性布局,是的一種布局模式。通過布局,可以很優(yōu)雅地解決很多布局的問題。與交叉軸兩端對(duì)齊,軸線之間的間隔平均分布。表示當(dāng)空間不足時(shí),不縮小。此文已由作者授權(quán)騰訊云社區(qū)發(fā)布 本文由云+社區(qū)發(fā)表 Flex是Flexible Box 的縮寫,意為彈性布局,是CSS3的一種布局模式。通過Flex布局,可以很優(yōu)雅地解決很多CSS布局的問題。下面會(huì)分別介紹容器的6個(gè)屬性...

    lbool 評(píng)論0 收藏0
  • CSS實(shí)例詳解Flex布局

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

    RobinQu 評(píng)論0 收藏0
  • CSS實(shí)例詳解Flex布局

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

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

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

0條評(píng)論

voyagelab

|高級(jí)講師

TA的文章

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