<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、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.waidid2022.com/xiaochengxu/">微信小程序開發</a></div>
          <div style="border: #fff solid 1px; width:100px;><a href="http://www.waidid2022.com/">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布局介紹-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>