Flex 項目屬性：flex 布局示例

levinit 發(fā)布于2019-04-23 11:54 / 3526人閱讀

flex屬性：

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

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

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

一、

CSS：

HTML：

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

頁面：

二、

CSS：

HTML：

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

頁面：

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

文章乃參考、轉載其他博客所得，僅供自己學習作筆記使用！！！

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1334.html

彈性布局示例

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

qqlcbb 2019-08-29 15:08 評論0 收藏0
彈性布局示例

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

piglei 2019-08-02 10:15 評論0 收藏0
彈性布局flex 兼容寫法

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

shiweifu 2019-08-30 11:21 評論0 收藏0
Flexbox完全指南（譯）

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

pekonchan 2019-08-30 13:09 評論0 收藏0