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

資訊專欄INFORMATION COLUMN

詳解CSS的Flex布局

番茄西紅柿 / 3490人閱讀

摘要：本文由云社區(qū)發(fā)表是的縮寫，意為彈性布局，是的一種布局模式。通過(guò)布局，可以很優(yōu)雅地解決很多布局的問(wèn)題。與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。表示當(dāng)空間不足時(shí)，不縮小。此文已由作者授權(quán)騰訊云社區(qū)發(fā)布

本文由云+社區(qū)發(fā)表

Flex是Flexible Box 的縮寫，意為"彈性布局"，是CSS3的一種布局模式。通過(guò)Flex布局，可以很優(yōu)雅地解決很多CSS布局的問(wèn)題。下面會(huì)分別介紹容器的6個(gè)屬性和項(xiàng)目的6個(gè)屬性。每個(gè)屬性會(huì)附上效果圖，具體實(shí)現(xiàn)代碼會(huì)以github路徑形式更新于此。

1.瀏覽器支持情況

可以點(diǎn)擊查看各瀏覽器的兼容情況

2.容器的屬性

注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

容器的屬性有6個(gè)，分別是：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

(1)flex-direcion屬性:

作用：控制主軸的方向

flex-direction: row | row-reverse | column | column-reverse;

默認(rèn)值：row

(2)flex-wrap屬性：

作用：默認(rèn)情況下，項(xiàng)目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

flex-wrap: nowrap | wrap | wrap-reverse;

默認(rèn)值：nowrap

(3)flex-flow屬性

作用：該屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式

默認(rèn)值：row nowrap

(4)justify-content屬性

作用：定義項(xiàng)目在主軸上的對(duì)齊方式

justify-content: flex-start | flex-end | center | space-between | space-around;

默認(rèn)值：flex-start

(5)align-items屬性

作用：定義項(xiàng)目在交叉軸上如何對(duì)齊。

align-items: flex-start | flex-end | center | baseline | stretch

默認(rèn)值：flex-start

注意：如果align-items為stretch，想看到每個(gè)flex-item鋪滿整個(gè)交叉軸的話，需要設(shè)置所有的flex-item的高度：height:auto，否則達(dá)不到效果。

(6)align-content屬性

屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

默認(rèn)值：stretch

flex-start：與交叉軸的起點(diǎn)對(duì)齊。

flex-end：與交叉軸的終點(diǎn)對(duì)齊。

center：與交叉軸的中點(diǎn)對(duì)齊。

space-between：與交叉軸兩端對(duì)齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch：軸線占滿整個(gè)交叉軸。

3.項(xiàng)目的屬性

項(xiàng)目的屬性有6個(gè)，分別是：

order

flex-grow

flex-shrink

flex-basis

flex

align-self

(1)order屬性：

作用：定義項(xiàng)目的排列順序，數(shù)值越小，排列越靠前。

默認(rèn)值：0

(2)flex-grow屬性

作用：如果存在剩余空間，項(xiàng)目放大的比例。相當(dāng)于是各個(gè)項(xiàng)目根據(jù)這個(gè)比例，來(lái)分配剩余空間。

默認(rèn)值：0（不放大）

(3)flex-shrink屬性

作用：flex-shrink：如果存在空間不足，項(xiàng)目的“縮小比例”。0表示當(dāng)空間不足時(shí)，不縮小。

默認(rèn)值：1

負(fù)值對(duì)該屬性無(wú)效

(4)flex-basis屬性

作用：定義項(xiàng)目在主軸方向上占據(jù)空間大小的初值。

默認(rèn)值：auto(項(xiàng)目本來(lái)的大小)

(5)flex屬性

作用：是flex-grow、flex-shrink、flex-basis屬性的縮寫形式；

flex: none | [ ? || ]

注：幾種常見縮寫形式；

flex: auto; === flex: 1 1 auto;

flex: none; === flex: 0 0 auto;

flex: initial; === flex: 0 1 auto;

flex: ; === flex: 1 auto;

flex: 1; === flex: 1 1 auto;

建議優(yōu)先使用這個(gè)屬性，而不是多帶帶寫三個(gè)分離的屬性，因?yàn)闉g覽器會(huì)推算相關(guān)值

(6)align-self屬性

作用：屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

默認(rèn)值：auto，表示繼承父元素的align-items屬性，如果沒(méi)有父元素，則等同于stretch。

4.小結(jié)

本文分別介紹了容器的6個(gè)屬性和flex-item項(xiàng)目的6個(gè)屬性。建議跟著demo整體做一遍，有助于加深理解。如有問(wèn)題，歡迎指正。

此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布

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

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

相關(guān)文章

  • 詳解CSS的Flex布局

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

    lbool 評(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)方式，可以看出使用布局可以優(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)方式，可以看出使用布局可以優(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)方式，可以看出使用布局可以優(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

  • CSS flex 布局屬性詳解

    摘要：簡(jiǎn)介是的縮寫，意為彈性布局，用來(lái)為盒狀模型提供最大的靈活性。注意，設(shè)為布局以后，子元素的和屬性將失效?；靖拍畈捎貌季值脑?，稱為容器，簡(jiǎn)稱容器。它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡(jiǎn)稱項(xiàng)目。負(fù)值對(duì)該屬性無(wú)效。后兩個(gè)屬性可選。 簡(jiǎn)介： Flex是Flexible?Box的縮寫，意為彈性布局，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。注意，設(shè)為Flex布...

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

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

0條評(píng)論

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