知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    微信小程序布局display flex布局介紹

    作者:佳明媽 來源:博客園 2016-10-08 人氣:
    標題是微信小程序布局display flex布局介紹,其實是對css3的display flex的通用解釋,并不限于微信小程序布局,微信小程序里不是寫div之類,應該換為view之類的標記,當然原理一樣,把這篇

    標題是微信小程序布局display flex布局介紹,其實是對css3的display flex的通用解釋,并不限于微信小程序布局,微信小程序里不是寫div之類,應該換為view之類的標記,當然原理一樣,把這篇文章中講到的flex布局只是搬過去就可以用了。

    display flex是什么?

    微信小程序最近火的不要不要的,下載開發工具測試了一下,小程序對css支持很好, 布局使用display flex布局火力強大,不太了解或者對flex布局比較生疏的童靴分享一下display flex部分知識

    display flex是將對象作為彈性伸縮盒顯示。(伸縮盒最新版本)(CSS3)

    在web網頁中必須要考慮兼容性,因為瀏覽器不同,瀏覽器的支持和實現方式也不同,導致兼容起來略顯麻煩

    不過,我們這里是開發微信小程序的話,并不需要考慮其他瀏覽器。

    display flex布局使用方法

    設定一個容器,其中有多個子容器,比如,這是一個簡單的例子

    <div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
        <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
        <div style="border: #fff solid 1px;  width: 100px;><a href="http://www.fsussj.tw/xiaochengxu/">微信小程序開發</a></div>
        <div style="border: #fff solid 1px; width:100px;><a href="http://www.fsussj.tw/">web前端開發</a></div>
    </div>

    display flex容器的屬性

    • flex-direction

    • flex-wrap

    • flex-flow

    • justify-content

    • align-items

    • align-content

    flex-direction屬性

    flex-direction屬性決定主軸的方向(即項目的排列方向)。
    1. .box {  

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

    3. }  

    • row(默認值):主軸為水平方向,起點在左端。

    • row-reverse:主軸為水平方向,起點在右端。

    • column:主軸為垂直方向,起點在上沿。

    • column-reverse:主軸為垂直方向,起點在下沿。

    flex-direction屬性
     

    flex-wrap屬性

    默認情況下,項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義,如果一條軸線排不下,如何換行。
    1. .box{  

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

    3. }  

    (1)nowrap(默認):不換行。
    flex-wrap屬性
    (2)wrap:換行,第一行在上方。
    (3)wrap-reverse:換行,第一行在下方。
     

    flex-flow

    flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,默認值為row nowrap。
     
    1. .box {  

    2.   flex-flow: <flex-direction> || <flex-wrap>;  

    3. }  

    justify-content屬性

    justify-content屬性定義了項目在主軸上的對齊方式。

    .box {  
    1.   justify-content: flex-start | flex-end | center | space-between | space-around;  

    2. }  

    • flex-start(默認值):左對齊

    • flex-end:右對齊

    • center: 居中

    • space-between:兩端對齊,項目之間的間隔都相等。

    • space-around:每個項目兩側的間隔相等。所以,項目之間的間隔比項目與邊框的間隔大一倍。

    displayflex justify-content屬性

    align-items屬性

    align-items屬性定義項目在交叉軸上如何對齊
    1. .box {  

    2.   align-items: flex-start | flex-end | center | baseline | stretch;  

    3. }  

    • flex-start:交叉軸的起點對齊。

    • flex-end:交叉軸的終點對齊。

    • center:交叉軸的中點對齊。

    • baseline: 項目的第一行文字的基線對齊。

    • stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。

     

    align-content屬性

    align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。

    .box {  
    1.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;  

    2. }  

    • flex-start:與交叉軸的起點對齊。

    • flex-end:與交叉軸的終點對齊。

    • center:與交叉軸的中點對齊。

    • space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。

    • space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。

    • stretch(默認值):軸線占滿整個交叉軸。

     

    displayflex的align-content屬性

    項目的屬性

    以下6個屬性設置在項目上。
    • order

    • flex-grow

    • flex-shrink

    • flex-basis

    • flex

    • align-self

    order屬性

    order屬性定義項目的排列順序。數值越小,排列越靠前,默認為0。
    1. .item {  

    2.   order: <integer>;  

    3. }  

     flex-grow屬性

    flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。
    1. .item {  

    2.   flex-grow: <number>; /* default 0 */  

    3. }  

    如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據的剩余空間將比其他項多一倍。

    flex-shrink屬性

    flex-shrink屬性定義了項目的縮小比例,默認為1,即如果空間不足,該項目將縮小。
    1. .item {  

    2.   flex-shrink: <number>; /* default 1 */  

    3. }  

    flex-shrink屬性

    如果所有項目的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性為0,其他項目都為1,則空間不足時,前者不縮小。
    負值對該屬性無效。

    flex-basis屬性

    flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。

    1. .item {  

    2.   flex-basis: <length> | auto; /* default auto */  

    3. }  



    它可以設為跟width或height屬性一樣的值(比如350px),則項目將占據固定空間。

    flex屬性

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

    2.   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  

    3. }  



    該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。
    建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因為瀏覽器會推算相關值。

    align-self屬性

    align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同于stretch。
     
    1. .item {  

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

    3. }  

    微信小程序布局display flex布局介紹

    該屬性可能取6個值,除了auto,其他都與align-items屬性完全一致。
    原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html


    ↓ 查看全文

    微信小程序布局display flex布局介紹由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    微信小程序布局display flex布局介紹-最新評論

    福利彩票排列7走势图