亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

伸縮布局

blastz / 1224人閱讀

摘要：主軸默認(rèn)方向水平從左向右側(cè)軸始終垂直于主軸在伸縮盒子中，子元素都是按照主軸方向顯示的。可以給父元素設(shè)置此屬性。默認(rèn)專有子元素設(shè)置子元素所占父元素剩余空間的比例注意是剩余屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為。

伸縮布局

注意，例如img這種多媒體標(biāo)簽，不要用伸縮盒子來布局，設(shè)置寬100%即可；

display: flex; (父元素)

必須將父元素設(shè)置為伸縮盒子（彈性盒子）

在伸縮盒子中，默認(rèn)子元素在一行顯示，這是伸縮盒子的特點(diǎn)，與脫標(biāo)無關(guān)！

為什么會(huì)一行顯示？

在伸縮盒子中，有兩條軸，一條主軸，一條側(cè)軸。
    主軸：默認(rèn)方向 - 水平從左向右
    側(cè)軸：始終垂直于主軸
在伸縮盒子中，子元素都是按照主軸方向顯示的。

flex-direction: row; (父元素)

設(shè)置主軸方向

此時(shí)已然可以設(shè)置 padding 和 margin ；

row 行(橫向)；

column 列(縱向)；

row-revers (橫向反轉(zhuǎn)，從右向左，類似右浮動(dòng))；

column-reverse(豎直反轉(zhuǎn))；

justify-content: flex-start; (父元素)

設(shè)置元素在主軸的對(duì)齊方式

flex-star;

從主軸的開始位置向右對(duì)齊顯示

flex-end;

在軸的末端對(duì)齊

center;

主軸的居中位置處

space-between;

兩端對(duì)齊，中間自適應(yīng)

space-around;

環(huán)繞效果，子盒子左右兩側(cè)都有空白；

space-evenly; (ios專有)

把所有空白平均分配；

沒有代碼提示。

align-items: stretch; (父元素)

設(shè)置元素在側(cè)軸的對(duì)齊方式；

只有當(dāng)子元素全部在一行顯示的時(shí)候才能用此屬性；

子元素有換行的時(shí)候用align-content: stretch; (父元素)屬性設(shè)置元素在側(cè)軸的對(duì)齊方式。

其實(shí)，當(dāng)元素多行顯示的時(shí)候，依舊可以用此屬性：

元素每一行都有自己的側(cè)軸，當(dāng)開啟align-items的時(shí)候，元素在自己行的側(cè)軸生效。

stretch; (默認(rèn))

stretch 拉伸的意思當(dāng)子元素沒有設(shè)置高度的時(shí)候，默認(rèn) stretch 拉伸為父容器的高度；

當(dāng)子元素有高度的時(shí)候，就默認(rèn)flex-start;

flex-start;

flex-end;

center;

flex-wrap: nowrap; (父元素)

在伸縮盒子中，元素如果超出父元素，默認(rèn)不換行?？梢越o父元素設(shè)置此屬性。

元素?fù)Q行：當(dāng)子元素有高度的時(shí)候，如果換 2 行，默認(rèn)是側(cè)軸的一半，3 行，則是側(cè)軸的三分之一，以此類推，元素在此行的start位置。

nowrap;(默認(rèn))

wrap - 換行

align-content: stretch; (父元素)

設(shè)置元素?fù)Q行后的對(duì)齊方式前提要保證元素是換行的

元素?fù)Q行：當(dāng)子元素有高度的時(shí)候，如果換 2 行，默認(rèn)是側(cè)軸的一半，3 行，則是側(cè)軸的三分之一，以此類推，元素在此行的start位置。

flex-start;

flex-end;

center;

space-around;

space-between;

stretch; (默認(rèn))

space-evenly; (ios專有)

flex: 1; (子元素)

設(shè)置子元素所占父元素 剩余 空間的比例

注意是 剩余 ?。。?/span>

order

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

?

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

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

相關(guān)文章

  • Flexbox完全指南（譯）

    摘要：本文譯自這里，針對(duì)本文介紹的屬性列個(gè)提綱伸縮容器屬性伸縮項(xiàng)目屬性以后再布局時(shí)可以考慮用啦背景布局模塊目前上一次工作草案的叫法旨在提供一種更高效的方式來布局排列及分配容器中項(xiàng)目的空間，即便容器大小是未知或動(dòng)態(tài)變化的因此稱為。 本文譯自 A Complete Guide to Flexbox這里，針對(duì)本文介紹的屬性列個(gè)提綱： 伸縮容器屬性： display flex-direction...

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

  • flexbox 伸縮布局

    摘要：同時(shí)定義了伸縮容器的主軸和側(cè)軸。伸縮項(xiàng)目向一行的中間位置靠齊。伸縮項(xiàng)目會(huì)平均地分布在行里。伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。默認(rèn)值伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。主要用來決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。 flexbox 研究 研究flexbox需要清楚一個(gè)概念，主軸和交叉軸的概念，而這兩個(gè)軸是可以交換的 flexbox的樣式屬性主要作用于兩個(gè)部分，一個(gè)是伸縮容器，一個(gè)是...

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

  • 使用 CSS3 Flexible Boxes 布局

    摘要：對(duì)于塊級(jí)元素來說，布局的延伸方向是自上而下的，也就是縱向。而對(duì)于行內(nèi)元素來說，布局延伸方向是自左往右的，也就是橫向。當(dāng)屬性值相加時(shí)，元素并不會(huì)溢出，而是表現(xiàn)為兩兩之間所占空間大小遵循相互的百分比比值。 Flexible Box是什么？Flexible意為可伸縮的，Box意為盒子，可以理解為一種新式的盒模型——伸縮盒模型。由CSS3規(guī)范提出，這是在原有的大家非常熟悉的block, inl...

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

  • CSS3 - 伸縮盒模型 Flexible Box Layout

    摘要：比如此屬性的默認(rèn)值為，也就是忽略伸縮項(xiàng)的寬度，管你要多少住房面積，通通按照屬性說好的分配，不許換行。，和上文提到的屬性實(shí)際上是這三個(gè)屬性的簡(jiǎn)寫形式。 參考鏈接 使用 CSS3 Flexible Boxes 布局 菜鳥教程鏈接：http://www.runoob.com/css3/cs... Flexible Box是什么？ Flexible意為可伸縮的，Box意為盒子，可以理解為...

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

  • CSS3 - 伸縮盒模型 Flexible Box Layout

    摘要：比如此屬性的默認(rèn)值為，也就是忽略伸縮項(xiàng)的寬度，管你要多少住房面積，通通按照屬性說好的分配，不許換行。，和上文提到的屬性實(shí)際上是這三個(gè)屬性的簡(jiǎn)寫形式。 參考鏈接 使用 CSS3 Flexible Boxes 布局 菜鳥教程鏈接：http://www.runoob.com/css3/cs... Flexible Box是什么？ Flexible意為可伸縮的，Box意為盒子，可以理解為...

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

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

0條評(píng)論

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