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

資訊專(zhuān)欄INFORMATION COLUMN

Flex 項(xiàng)目屬性：flex 布局示例

levinit / 3580人閱讀

flex屬性：

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫(xiě)，默認(rèn)值為0 1 auto。后兩個(gè)屬性可選。

該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。

下面來(lái)看看使用項(xiàng)目屬性flex的兩個(gè)示例：

一、

CSS：

1

HTML：

 1 <body>
 2     <div id="header">頁(yè)眉div>
 3     <div id="content">
 4         <div>左側(cè)固定div>
 5         <div>
 6             右側(cè)自適應(yīng)<br />
 7             左側(cè)CSS屬性：flex: 0 0 auto;<br />
 8             右側(cè)CSS屬性：flex: 1;
 9         div>
10     div>
11     <div id="footer">頁(yè)腳div>
12 body>

頁(yè)面：

?

二、

CSS：

?

1

HTML：

 1 <body>
 2     <div id="header">頭部div>
 3     <div class="content">
 4         <div>左側(cè)固定div>
 5         <div>
 6         中間自適應(yīng)<br>
 7         左側(cè)：flex: 0 0 auto;<br>
 8         中間：flex: 1 0 auto;<br>
 9         右側(cè)：flex: 0 0 auto;<br>
10         div>
11         <div>右側(cè)固定div>
12     div>
13     <div id="footer">底部div>
14 body>

頁(yè)面：

?

代碼可以直接復(fù)制到HTML頁(yè)面運(yùn)行，如果有不懂的地方請(qǐng)回顧Flex布局屬性：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

文章乃參考、轉(zhuǎn)載其他博客所得，僅供自己學(xué)習(xí)作筆記使用?。。?/p>

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

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

相關(guān)文章

  • 彈性布局示例

    摘要：彈性布局背景模塊目前為旨在提供一種更有效的方式來(lái)布置，對(duì)齊和分配容器中的項(xiàng)目之間的空間，即使其尺寸未知和或動(dòng)態(tài)因此單詞。主軸彈性容器的主軸是彈性項(xiàng)目布局的主要軸子項(xiàng)目默認(rèn)按照主軸排列。判斷哪個(gè)是起始點(diǎn)，主要看彈性布局的流動(dòng)方向。 原文章地址https://css-tricks.com/snippe...根據(jù)原文章翻譯并添加自己的理解，有不對(duì)的歡迎指正。 彈性布局-背景 Flexbox ...

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

  • 彈性布局示例

    摘要：彈性布局背景模塊目前為旨在提供一種更有效的方式來(lái)布置，對(duì)齊和分配容器中的項(xiàng)目之間的空間，即使其尺寸未知和或動(dòng)態(tài)因此單詞。主軸彈性容器的主軸是彈性項(xiàng)目布局的主要軸子項(xiàng)目默認(rèn)按照主軸排列。判斷哪個(gè)是起始點(diǎn)，主要看彈性布局的流動(dòng)方向。 原文章地址https://css-tricks.com/snippe...根據(jù)原文章翻譯并添加自己的理解，有不對(duì)的歡迎指正。 彈性布局-背景 Flexbox ...

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

  • 彈性布局flex 兼容寫(xiě)法

    摘要：設(shè)置在彈性項(xiàng)目上的屬性屬性定義項(xiàng)目的排列順序。屬性定義了項(xiàng)目的縮小比例，默認(rèn)為，即如果空間不足，該項(xiàng)目將縮小。屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋屬性。 兼容瀏覽器版本 Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+ 瀏覽器對(duì)最新flexbox規(guī)范的支持情況： Chrome 29+ Firefox 28+...

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

  • Flexbox完全指南（譯）

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

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

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

0條評(píng)論

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