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

資訊專欄INFORMATION COLUMN

Flex 項目屬性：flex 布局示例

levinit / 3531人閱讀

flex屬性：

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

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

下面來看看使用項目屬性flex的兩個示例：

一、

CSS：

1

HTML：

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

頁面：

?

二、

CSS：

?

1

HTML：

 1 <body>
 2     <div id="header">頭部div>
 3     <div class="content">
 4         <div>左側(cè)固定div>
 5         <div>
 6         中間自適應<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>

頁面：

?

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

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

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

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

相關文章

  • 彈性布局示例

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

    qqlcbb 評論0 收藏0

  • 彈性布局示例

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

    piglei 評論0 收藏0

  • 彈性布局flex 兼容寫法

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

    shiweifu 評論0 收藏0

  • Flexbox完全指南（譯）

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

    pekonchan 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<