我对弹性布局（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 —（弹性布局）