我對彈性布局（FIEX）的初步認識和了解

彈性布局（fiex）子產品旨在提供一個更加有效的方式來布置、對齊和分布容器之間的各項内容，即使它們的大小是未知或者動态變化的。彈性布局的主要思想是讓容器有能力來改變項目的寬度和高度，以填滿可用空間（主要是為了容納所有類型的顯示裝置和螢幕尺寸）。彈性布局與方向無關，這是相對于正常布局（塊是以垂直和内聯水準為基礎）最重要的不同點。很顯然，正常布局設計缺乏靈活性，無法支援大型和複雜的應用程式（特别是當它涉及改變方向、縮放、拉伸和收縮等時）。

彈性局的基礎文法，主要涉及flex容器的屬性和flex項目的屬性，容器預設存在兩根軸：水準的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；交叉軸的開始位置叫作cross start，結束位置叫作cross end。項目預設沿主軸排列。單個項目占據的主軸空間叫作main size，占據的交叉軸空間叫作cross size。

·flex-direction：主軸的方向（即項目的排列方向，左中右、上中下）。 ·flex-wrap：如果一條軸線排不下該如何換行。 ·flex-flow：flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。 ·justify-content：項目在主軸上如何對齊（左中右）。 ·align-items：項目在交叉軸上如何對齊（上中下）。 ·align-content：定義多根軸線的對齊方式。如果項目隻有一根軸線，該屬性不起作用。如圖：

flex容器的屬性

flex容器包含以下幾個屬性：flex-direction（項目排列方向），flex-wrap（項目換行）、flex-flow、justify-content（水準對齊）、align-items（垂直對齊）、align-content（各行對齊）。

項目排列方向（flex-direction）

flex-direction屬性決定主軸的方向（即項目的排列方向），這裡的排列方向可以了解為水準方向和垂直方向。代碼如下，示意圖如圖7-3所示。

.box { flex-direction: row | row-reverse | column | column-reverse; }

flex-direction項目排列方向代碼中各值含義如下。

·column-reverse：主軸為垂直方向，起點在下沿。

·column：主軸為垂直方向，起點在上沿。

·row（預設值）：主軸為水準方向，起點在左端。

·row-reverse：主軸為水準方向，起點在右端。

.小程式預設排版下面代碼顯示5個長度和寬度都是100px的方塊。

.wxml檔案代碼示例如下：

<view class='zong'>
<view class='fangxing'>
<text>01</text>
</view>
<view  class='fangxing'>
<text>02</text>
  </view>
  <view  class='fangxing'>
    <text>03</text>
  </view>
  <view  class='fangxing'>
    <text>04</text>
  </view>
  <view  class='fangxing'>
    <text>05</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{
 padding: 10px;     /*内邊距*/
}
.fangxing{
  width: 100px; 
  height: 100px;  
  background-color:  beige;
margin: 10px;         /*每個方框的外邊距*/
}

flex-direction：row .wxml檔案不變（沿用預設排版的代碼），增加flex顯示模式。

.wxss檔案代碼示例如下：

.zong{
  padding: 10px;
  display: flex; 
  flex-direction:  row;    /* row是預設值，該行樣式可以省略*/
  /* row預設，可以不寫：row | row-reverse | column | column-reverse*/ 
}


.fangxing{
width: 100px; height: 100px;
background-color:  beige;
  margin: 10px;
}

flex-direction：row讓容器内的元素按行排列，同時預設不換行。display：flex設定後flex-direction的屬性設定才會生效。 3.flex-direction：row-reverse .wxml檔案不變（沿用預設排版的代碼），設定容器的樣式flex-direction：row-reverse。

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  flex-direction: row-reverse;
  padding: 10px;    /*内邊距*/
}

小程式中項目按flex-direction:row-reverse反轉排列效果 4.flex-direction：column .wxml檔案不變（沿用預設排版的代碼），設定容器的樣式flex-direction：column。

.wxss檔案代碼示例如下：

.zong{


display: flex; 


flex-direction: column;


padding: 10px;    /*内邊距*/


}

flex-direction：column-reverse .wxml檔案不變（沿用預設排版的代碼），設定容器的樣式flex-direction：column-reverse。

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  flex-direction: column-reverse;
  padding: 10px;    /*内邊距*/

項目換行（flex-wrap）預設情況下，項目都排在一條線（又稱“軸線”）上。flex-wrap屬性定義了如果一條軸線排不下該如何換行，如圖所示。

基礎文法和值如下：

.box{ flex-wrap: nowrap | wrap | wrap-reverse; }

flex-wrap項目換行 ·nowrap（預設）：不換行，如圖所示。

nowrap不換行 ·wrap：換行，第一行在上方，如圖所示。

wrap換行 ·wrap-reverse：換行，第一行在下方，如圖所示。

wrap-reverse換行 1.flex-wrap：nowrap 在容器的樣式中增加代碼。

zong{
  flex-wrap: nowrap    /*nowrap預設值，可選屬性值：nowrap|wrap|wrap-reverse*/
}

nowrap效果如圖所示。

flex-wrap：wrap 在容器中增加樣式flex-wrap：wrap。

.wxml檔案代碼示例如下：

<view class='zong'>
 <view class='fangxing'>
    <text>01</text>
</view>
<view  class='fangxing'>
  <text>02</text>
</view>
  <view  class='fangxing'>
  <text>03</text>
  </view>
  <view  class='fangxing'>
<text>04</text>
  </view>
  <view  class='fangxing'>
<text>05</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{


padding: 10px;


display: flex; 


flex-direction: row ;


/*row預設，屬性值有row|row-reverse|column|column-


      reverse*/


flex-wrap: wrap;


/*nowrap預設，屬性值有：nowrap | wrap | wrap-


      reverse*/


}


.fangxing{


  width: 100px; height: 100px;  
  background-color:  beige;
  margin: 10px;
}

.flex-wrap：wrap-reverse 隻需更改上面的容器樣式，變更為flex-wrap：wrap-reverse。 .wxss檔案代碼示例如下：

.zong{
padding: 10px;
display: flex; 
flex-direction: row ;
/*row預設，屬性值有row|row-reverse|column|
column-reverse*/
flex-wrap: wrap-reverse;
/*nowrap預設，屬性值有：nowrap|wrap|wrap-
reverse*/
}

flex-flow屬性 flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。代碼示例如下：

.box { flex-flow: <flex-direction> || <flex-wrap>; }

水準對齊（justify-content） justify-content屬性定義了項目在主軸上的對齊方式，如圖所示。

.box { 


justify-content: flex-start | flex-end | center | space-between | space-around; 


}

代碼中各值含義如下。 ·

flex-start（預設值）：左對齊。 ·flex-end：右對齊。 ·center：居中。.space-between：兩端對齊，項目之間的間隔都相等。 ·space-around：每個項目兩側的間隔相等，是以，項目之間的間隔比項目與邊框的間隔大一倍。

ustify-content：flex-start .wxml檔案代碼示例如下：

<view class='zong'>
   <view class='fangxing'>
      <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{


display: flex; 


justify-content:  flex-start;


/*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/


}


.fangxing{


width: 100px; height: 100px;


background-color:  beige;


}

justify-content：flex-end .wxml檔案代碼示例如下：

<view class='zong'>
    <view class='fangxing'>
      <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.zong{
  display: flex; 
  justify-content:  flex-end;
  /*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/
}

justify-content：center .wxml檔案代碼示例如下：

<view class='zong'>
    <view class='fangxing'>
      <text>01</text>
  </view>
<view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 


  justify-content:  center;


  /*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/


}

justify-content：space-between .wxml檔案代碼示例如下：

<view class='zong'>
    <view class='fangxing'>
      <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  justify-content:  space-between;
  /*flex-start是預設值：flex-start|flex-end|center|space-between|space-around*/
}

justify-content：space-around .wxml檔案代碼示例如下：

<view class='zong'>
    <view class='fangxing'>
      <text>01</text>
  </view>
  <view  class='fangxing'>
    <text>02</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  justify-content:  space-around;
  /*flex-start是預設值：flex-start|flex-
end|center|space-between|space-around*/
}

垂直對齊（align-items） align-items屬性定義項目在交叉軸上如何對齊，如圖所示。

代碼示例如下：

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下。該屬性可以取5個值。 ·flex-start：交叉軸的起點對齊。 ·flex-end：交叉軸的終點對齊。 ·center：交叉軸的中點對齊。 ·baseline：項目的第一行文字的基線對齊。 ·stretch（預設值）：如果項目未設定高度或設為auto，區塊将占滿整個容器高度。

align-items：flex-start .wxml檔案代碼示例如下：

<view class='zong'>
  <view class='fangxing1'>
      <text>01</text>
    </view>
    <view  class='fangxing2'>
      <text>02</text>
    </view>
    <view  class='fangxing3'>
      <text>03</text>
    </view>  
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: flex-start;    /*預設值是stretch，屬性值有：flex-start | flex-end |
                      center | baseline | stretch */
}


.fangxing1{
  width: 60px; height: 60px;  
  background-color:  beige;
}


.fangxing2{
  width: 30px; height: 30px;  
  background-color:  beige;
}


.fangxing3{
  width: 90px; height: 90px;  
  background-color:  beige;
}

align-items：flex-end .wxml檔案代碼示例如下：

<view class='zong'>
  <view class='fangxing1'>
      <text>01</text>
    </view>
    <view  class='fangxing2'>
      <text>02</text>
    </view>
    <view  class='fangxing3'>
      <text>03</text>
    </view>
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: flex-end;
   /*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}

align-items：center .wxml檔案代碼示例如下：

<view class='zong'>
  <view class='fangxing1'>
      <text>01</text>
    </view>
    <view  class='fangxing2'>
      <text>02</text>
    </view>
    <view  class='fangxing3'>
      <text>03</text>
    </view>  
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: center;


/*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */


}

align-items：baseline .wxml檔案代碼示例如下：

<view class='zong'>
  <view class='fangxing1'>
      <text>01</text>
    </view>
    <view  class='fangxing2'>
      <text>02</text>
    </view>
    <view  class='fangxing3'>
      <text>03</text>
    </view>  
</view>

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: baseline;
   /*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}

align-items：stretch .wxml檔案代碼示例如下：

<view class='zong'>
  <view class='fangxing1'>
      <text>01</text>
    </view>
<view  class='fangxing2'>
      <text>02</text>
    </view>
    <view  class='fangxing3'>
      <text>03</text>
    </view>  
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: stretch;
  /*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}

不設定01這個區塊的高度，效果如何。 .wxml檔案代碼示例如下：

<view class='zong'>
  <view class='fangxing1'>
      <text>01</text>
    </view>
    <view  class='fangxing2'>
      <text>02</text>
    </view>
    <view  class='fangxing3'>
      <text>03</text>
    </view>  
</view>

各行對齊（align-content） align-content屬性用于修改flex-wrap屬性的行為，類似于align-items，但它不是設定彈性子元素的對齊，而是設定各行的對齊，如圖所示。

align-content各行對齊代碼示例如下：

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

代碼中各值的含義如下。

·flex-start：交叉軸的起點對齊。

·flex-end：交叉軸的終點對齊。

·center：交叉軸的中點對齊。

·space-between：交叉軸兩端對齊，軸線之間的間隔平均分布。 ·space-around：每根軸線兩側的間隔都相等，是以，軸線之間的間隔比軸線與邊框的間隔大一倍。

·stretch（預設值）：軸線占滿整個交叉軸。

.zong{
  display: flex; 
  justify-content: space-around;
  align-items: stretch;
  /*預設值是stretch，屬性值有：flex-start|flex-end|center|baseline|stretch */
}


.fangxing1{
  background-color:  beige;
}


.fangxing2{
  width: 30px; height: 30px;  
  background-color:  beige;
}


.fangxing3{
  width: 90px; height: 90px;  
  background-color:  beige;
}

flex項目的屬性

本節主要講解flex項目屬性的基礎文法和在小程式中的應用，主要包含：子元素的排序，放大比例，縮小比例，項目占據的主軸空間，flex綜合屬性設定，子元素的對齊，對齊和居中。

子元素的排序（order） order屬性定義項目的排列順序。數值越小，排列越靠前，預設為0，如圖所示。

.wxml檔案代碼示例如下：

<view class='zong'>
    <view class='fangxing1'>
      <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{ 
  display: flex; 
  flex-direction: row  ;
  padding: 10px;        /*内邊距*/
}


.fangxing1{
  width: 100px; height: 100px;  
  background-color:     #f5f5dc;
  margin: 10px;        /*每個方框的外邊距*/
}


.fangxing2{
  width: 100px; height: 100px;  
  background-color:      #f5f5dc;
  margin: 10px;        /*每個方框的外邊距*/
}


.fangxing3{
  width: 100px; height: 100px;  
  background-color:      #f5f5dc;
  margin: 10px;        /*每個方框的外邊距*/
}

order改變我們修改03區塊的order（樣式）值為負數，01區塊的order（樣式）值為10，03區塊的order（樣式）值為100（WXML頁面不變），代碼和效果如下。

.wxss檔案代碼示例如下：

.zong{ 
  display: flex; 
  flex-direction: row  ;
  padding: 10px;        /*内邊距*/
}


.fangxing1{
  width: 100px; height: 100px;  
  background-color:      #f5f5dc;
  margin: 10px;        /*每個方框的外邊距*/
  order: 10;
}


.fangxing2{
  width: 100px; height: 100px;  
  background-color:      #f5f5dc;
  margin: 10px;        /*每個方框的外邊距*/
  order: 100;
}


.fangxing3{
  width: 100px; height: 100px;  
  background-color:      #f5f5dc;
  margin: 10px;        /*每個方框的外邊距*/
  order: -1;
}

放大比例（flex-grow）,flex-grow屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大。代碼示例如下：

.item { flex-grow: <number>;    /* default 0 */ }

如果所有項目的flex-grow屬性都為1，則它們将等分剩餘空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩餘空間将比其他項目多一倍。

為了增強效果，我們将每個方框的長寬都調整為60px。

.wxml檔案代碼示例如下：

.zong{ 
  display: flex; 
  flex-direction: row  ;
  padding: 5px;        /*内邊距*/
}


.fangxing1{
  width: 60px; height: 60px;  
  background-color:    #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
}


.fangxing2{
  width: 60px; height: 60px;  
  background-color:    #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
  }


.fangxing3{
  width: 60px; height: 60px;  
  background-color:    #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
}

.wxss檔案代碼示例如下：

<view class='zong'>
    <view class='fangxing1'>
      <text>01</text>
  </view>
<view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
     </view>
</view>

設定區塊的flex-grow 示例,下面我們設定01區塊的flex-grow的值為1，其他區塊不變。隻需要改造01區塊對應的樣式（樣式類名為fangxing1）代碼即可。

.wxss檔案代碼示例如下：

.fangxing1{
  width: 60px; height: 60px;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
  flex-grow: 1；
}

可以看到01區塊擴充占用了所有剩餘的空白（内邊距、外邊距除外）。示例2 下面我們設定02區塊的flex-grow的值為1，其他區塊不變。隻需要改造02區塊對應的樣式（樣式類名為fangxing2）代碼即可。

.wxss檔案代碼示例如下：

.fangxing2{
  width: 60px; height: 60px;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
  flex-grow: 1；
}

下面我們設定01和02區塊的flex-grow的值為1，03區塊不變。

.wxss檔案代碼示例如下：

.fangxing1{
  width: 60px; height: 60px;  
  background-color:    #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
  flex-grow: 1;
}


.fangxing2{
  width: 60px; height: 60px;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
  flex-grow: 1;
}

01和02區塊flex-grow改變後效果可以看到03區塊的大小不變，01和02區塊的寬度都同樣擴充，占用了餘下的空間。下面我們設定所有區塊的flex-grow的值為1。

.wxss檔案代碼示例如下：

.zong{ 
display: flex; 
flex-direction: row  ;
  padding: 5px;        /*内邊距*/
}


.fangxing1{
width: 60px; height: 60px;  
background-color:      #f5f5dc;
margin: 5px;        /*每個方框的外邊距*/
flex-grow: 1;


}


.fangxing2{
width: 60px; height: 60px;  
  background-color:      #f5f5dc;
margin: 5px;        /*每個方框的外邊距*/
flex-grow: 1;


}


.fangxing3{
width: 60px; height: 60px;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
  flex-grow: 1;
}

flex-grow均分配置設定效果可以看到，所有區塊的寬度都同樣擴充，占用了餘下的空間（均分了空白區域）。

縮小比例（flex-shrink） flex-shrink屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目将縮小。代碼示例如下：

.item { flex-shrink: <number>; /* default 1 */ }

如果所有項目的flex-shrink屬性都為1，當空間不足時，都将等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。負值對該屬性無效。預設代碼和效果父容器設定了flex模式後，其内部的子元素預設都是按等比例縮小的。 .wxml檔案代碼示例如下：

<view class='zong'> 
  <view class='fangxing1'>
    <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view>
</view>

.wxss檔案代碼示例如下：

.zong{ 
  display: flex; 
  padding: 5px;        /*内邊距*/
}


.fangxing1{
  width: 300rpx; height: 300rpx;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
}


.fangxing2{
  width: 300rpx; height: 300rpx;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
}


.fangxing3{
  width: 300rpx; height: 300rpx;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
}

flex-shrink預設效果下面我們設定01區塊的flex-shrink的值為0（0表示不縮小，預設值1表示縮小），其他區塊不變。隻需要改造01區塊對應的樣式（樣式類名為fangxing1）代碼即可。

.wxss檔案代碼示例如下：

.fangxing1{
  width: 300rpx; height: 300rpx;  
  background-color:      #f5f5dc;
  margin: 5px;        /*每個方框的外邊距*/
  flex-shrink: 0;
}

項目占據的主軸空間（flex-basis） flex-basis屬性定義了在配置設定多餘空間之前項目占據的主軸空間（main size）。浏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大小。使用文法和示例代碼如下：

.item { flex-basis: <length> | auto; /* default auto */ }

它可以設為與width或height屬性一樣的值（比如350px），則項目将占據固定空間。大家可以嘗試下百分比的設定。

flex綜合屬性設定 ,flex屬性是flex-grow、flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。使用文法和代碼示例如下： .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 該屬性有兩個快捷值：auto（1 1 auto）和none（0 0 auto）。建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為浏覽器會推算相關值。

子元素的對齊（align-self） align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性，如圖7-40所示。圖7-40　子元素對齊預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素則等同于stretch。代碼示例如下：

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

.wxml檔案代碼示例如下：

<view class='zong'>
<view class='fangxing1'>
<text>01</text>
</view>
<view  class='fangxing2'>
<text>02</text>
</view>
<view  class='fangxing3'>
<text>03</text>
</view>
</view>

.wxss檔案代碼示例如下：

.zong{
  display: flex; 
justify-content: space-around;
}
.fangxing1{
  width: 60px; height: 60px;  
background-color:  beige;
}
.fangxing2{
  width: 30px; height: 30px;  
background-color:  beige;
}
.fangxing3{
width: 90px; height: 90px;  
background-color:  beige;
}

下面我們設定01區塊的align-self的值為flex-end，02區塊的align-self的值為center，其他區塊不變。

.wxss檔案代碼示例如下：

.zong{
display: flex; 
justify-content: space-around;
}
.fangxing1{
width: 60px; height: 60px;  
background-color:  beige;
align-self: flex-end;
}
.fangxing2{
width: 30px; height: 30px;  
background-color:  beige;
align-self:  center;
}
.fangxing3{
width: 90px; height: 90px;  
background-color:  beige;
}

對齊和居中（margin） 1.預設樣式和代碼 .wxml檔案代碼示例如下：

<view class='zong'>
<view class='fangxing1'>
<text>01</text>
</view>
<view  class='fangxing2'>
<text>02</text>
</view>
<view  class='fangxing3'>
<text>03</text>
</view>
</view>

.wxss檔案代碼示例如下：

.zong{  
display: flex; 
flex-direction: row  ;
padding: 5px;    /*内邊距*/
}
.fangxing1{
width: 60px; height: 60px;  
background-color:      #f5f5dc;
margin: 5px;        /*每個方框的外邊距*/
}
.fangxing2{
width: 60px; height: 60px;  
background-color:      #f5f5dc;
margin: 5px;        /*每個方框的外邊距*/
}
.fangxing3{
width: 60px; height: 60px;  
background-color:      #f5f5dc;
margin: 5px;        /*每個方框的外邊距*/
}

設定margin值為auto，自動擷取彈性容器中剩餘的空間。設定垂直方向的margin值為auto，可以使彈性子元素在彈性容器的垂直方向居中。以下執行個體在第一個彈性子元素上設定了“margin-right：auto；”，它将剩餘的空間放置在元素的右側。下面我們設定01區塊的margin-right值為auto，其他區塊不變。隻需要改造01區塊對應的樣式（樣式類名為fangxing1）代碼即可。

.wxss檔案代碼示例如下：

.fangxing1{
width: 60px; height: 60px;  
background-color:  #f5f5dc;
margin-right: auto;
}

使用彈性布局，居中變得很簡單，隻要設定“margin：auto；”便可使彈性子元素在垂直和水準方向上完全居中。

.wxml檔案代碼示例如下：

<view class='zong2'>
<view class='fangxing4'>
<text>04</text>
</view>
</view>

.wxss檔案代碼示例如下：

.zong2{  
display: flex; 
padding: 5px;        /*内邊距*/
height: 200px; 
background-color:  gainsboro;
}
.fangxing4{
width: 60px; height: 60px;  
background-color:      #f5f5dc;
margin: auto;
}

要設定文本左右居中和上下居中，需要改造04區塊的樣式代碼。

.wxss檔案代碼示例如下：

.fangxing4{
width: 60px; height: 60px;  
background-color:      #f5f5dc;
margin: auto;
text-align: center;    /*所有居中*/
line-height: 60px;    /*上下居中*/
}

flex布局樣例

下面我們定義一個基本的布局，長寬都是250px的方框，背景為灰色。然後我們在基本布局内示範flex各種實作。基本布局代碼示例如下：

<style> 
/*定義一個帶顔色的背景方框*/
.flex-container { 
/*display: -webkit-flex; */
/*display: flex;  */
width: 250px; 
height: 250px; 
background-color: lightgrey; 
} 
/*定義一個長寬都是70的圓形*/
.flex-item{ 
background-color: cornflowerblue; 
width: 70px; 
height: 70px;
border-radius:50%;  margin:10px;
} 
</style>

我對彈性布局（FIEX）的初步認識和了解

繼續閱讀

CSS / flex 彈性布局詳解

flex布局的整理彈性布局Flex布局

彈性布局flex

用flex布局模拟bootstrap的栅格式布局

及時儲存，三下數學《小數的初步認識》知識點總結及常考易錯題

你知道人生的三重境界嗎？你知道你的人生正處在哪個層次嗎？如何才能提升你的層次呢？#人生感悟#人的一生先後要經曆三個層次或

80後回憶國小數學課本第七冊分數的初步認識一和現課本對比

感謝中國塑協阻燃材料及應用專委會的老師們提供機會，通過考察學習，了解了行業标杆企業的先進技術及文化、發展曆程，對阻燃材料

flex彈性布局相容寫法

如何建構響應式網站

關于彈性布局的一些簡單應用

CSS彈性布局（一）

flex伸縮布局之九宮格

css 彈性布局

彈性布局常用屬性

CSS —（彈性布局）