参考：

1

2

语法：

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。


  2. .box{
  3.   display: flex;
  4. }

行内元素也可以使用 Flex 布局。


  2. .box{
  3.   display: inline-flex;
  4. }

Webkit 内核的浏览器 (苹果系统），必须加上-webkit前缀。


  2. .box{
  3.   display: -webkit-flex; /* Safari */
  4.   display: flex;
  5. }

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器的属性

以下6个属性设置在容器上。

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

3.1 flex-direction属性

　　flex-direction属性决定主轴的方向（即项目的排列方向）。


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

　　它可能有4个值。

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

　　1、不用flex布局

  1.  1 <!--pages/index/index.wxml-->
  2.  2 <view class="container">
  3.  3
  4.  4   <view class="txt01">
  5.  5     <text >pages</text>
  6.  6   </view>
  7.  7
  8.  8   <view class="txt02">
  9.  9     <text >pages</text>
  10. 10   </view>
  11. 11
  12. 12   <view class="txt03">
  13. 13     <text >pages</text>
  14. 14   </view>
  15. 15
  16. 16   <view class="txt04">
  17. 17     <text >pages</text>
  18. 18   </view>
  19. 19
  20. 20 </view>
  21. 21 /* pages/index/index.wxss */
  22. 22 .txt01{
  23. 23   width: 150rpx;
  24. 24   height: 150rpx;
  25. 25   background-color: red;
  26. 26 }
  27. 27 .txt02{
  28. 28   width: 150rpx;
  29. 29   height: 150rpx;
  30. 30   background-color: green;
  31. 31 }
  32. 32 .txt03{
  33. 33   width: 150rpx;
  34. 34   height: 150rpx;
  35. 35   background-color: blue;
  36. 36 }
  37. 37 .txt04{
  38. 38   width: 150rpx;
  39. 39   height: 150rpx;
  40. 40   background-color: yellow;
  41. 41 }

　　2、加上flex-direction

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: row;   // 默认row
  5. 5 }
  6. 6 。。。。。。。。

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column;  //
  5. 5 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: row-reverse;
  5. 5 }

 

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column-reverse;
  5. 5 }

3.2 flex-wrap属性

　　默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。


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

　　它可能取三个值。

（1）nowrap：默认值，表示不换行，如果单行内容过多，项目宽度可能会被压缩

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

　　3、加上flex-wrap

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-wrap: nowrap //默认，不换行 自动调整
  5. 5 }
  6. 6 。。。。。。。。。。

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column;  //纵向
  5. 5   flex-wrap: nowrap;
  6. 6 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-wrap: wrap;  //换行
  5. 5 }
  6. 6 。。。。。

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column;
  5. 5   flex-wrap: wrap;
  6. 6 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-wrap: wrap-reverse; //换行 逆
  5. 5 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column;
  5. 5   flex-wrap: wrap-reverse;
  6. 6 }

3.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。


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

　　4、加上flex-flow

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-flow: row nowrap  // 相当于：flex-direction:row; flex-wrap:nowrap
  5. 5 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-flow: row wrap   //相当于  flex-direction:row; flex-wrap:wrap
  5. 5 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-flow: row wrap-reverse  // 相当于flex-direction:row;flex-wrap:wrap-reverse
  5. 5 }

  1.  1 /* pages/index/index.wxss */
  2.  2 .container{
  3.  3   display: flex;
  4.  4   flex-flow: column nowrap    //相当于：flex-direction：column; flex-wrap:nowrap
  5.  5 }
  6.  6 。。。。。。。
  7.  7 /* pages/index/index.wxss */
  8.  8 .container{
  9.  9   display: flex;
  10. 10   flex-flow: column wrap    //相当于：flex-direction：column; flex-wrap:wrap
  11. 11 }
  12. 12 。。。。。。。
  13. 13 /* pages/index/index.wxss */
  14. 14 .container{
  15. 15   display: flex;
  16. 16   flex-flow: column wrap-rever  //相当于:flex-direction:column;flex-wrap:wrap-reverse
  17. 17 }

3.4 justify-content属性

justify-content属性定义了项目在主轴上的对齐方式，以及分配项目之间及其周围多余的空间


  2. .box {
  3.   justify-content: flex-start | flex-end | center | space-between | space-around;
  4. }

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

  • flex-start:默认值，表示项目对齐主轴起点，项目间不留空隙

    center:项目在主轴上居中排列，项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离

    flex-end：项目对齐主轴终点，项目间不留空隙

    space-between：项目间距相等，第一个和最后一个项目分别离起点/终点的距离为0

    space-around：与space-between相似，不同之处为第一个项目离主轴七点和最后一个项目离终点的距离为中间项目间距的一半

　　5、加上justify-content   定义了项目在主轴上的对齐方式

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: row;
  5. 5   justify-content: flex-start  //  项目对齐主轴起点，项目间不留空隙
  1. 6 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: row;
  5. 5   justify-content: flex-end  // 项目对齐主轴起点，无间隙 
    6 } 

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: row;
  5. 5   justify-content: center   //居中，无间隙，主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离
  6. 6 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: row;
  5. 5   justify-content: space-between  //两端对齐，第一个和最后一个项目分别离起点/终点的距离为0
  6. 6 }

 

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: row;
  5. 5   justify-content: space-around  //每个项目两侧的间隔相等，第一个项目离主轴七点和最后一个项目离终点的距离为中间项目间距的一半
  6. 6 }

 

3.5 align-items属性

align-items属性定义项目在交叉轴上如何对齐。


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

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。　

　　6、加上align-items   定义项目在交叉轴上如何对齐

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction:column;
  1. 5   align-items: flex-start;  //交叉轴的起点对齐
  2. 6 }

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column;
  5. 5   align-items: flex-end;//交叉轴的终点对齐
  1. 6 }

 

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column;
  5. 5   align-items: center //交叉轴的中点对齐
  1. 6 }

 

  1. 1 /* pages/index/index.wxss */
  2. 2 .container{
  3. 3   display: flex;
  4. 4   flex-direction: column;
  5. 5   align-items: baseline;    //项目的第一行文字的基线对齐
  6. 6 }

  1.  1 /* pages/index/index.wxss */
  2.  2 .container{
  3.  3   display: flex;
  4.  4   flex-direction: column;
  5.  5   align-items: stretch;   // 如果项目未设置高度或设为auto，将占满整个容器的高度
  6.  6 }
  7.  7 .txt01{
  8.  8   /* width: 200rpx; */
  9.  9   height: 200rpx;
  10. 10   background-color: red;
  11. 11 }
  12. 12 .txt02{
  13. 13   /* width: 200rpx; */
  14. 14   height: 200rpx;
  15. 15   background-color: green;
  16. 16 }
  17. 17 .txt03{
  18. 18   /* width: 200rpx; */
  19. 19   height: 200rpx;
  20. 20   background-color: blue;
  21. 21 }

3.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


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

该属性可能取6个值。

  • flex-start：首行在交叉轴起点开始排列，行间不留间距
  • flex-end：与交叉轴的终点对齐尾行在交叉轴终点开始排列，行间不留间距
  • center：行在交叉轴终点开始排列，行间不留间距，首行离交叉轴起点和行尾离交叉轴终点的距离相等
  • space-between：行间间距、首行离交叉轴起点和尾行离交叉轴终点的距离相等
  • space-around：行与行间距相等，首行离交叉轴起点和尾行离交叉轴终点的距离为行与行间间距的一半。
  • stretch：默认值，未设置项目尺寸时将各行中的项目拉伸至填满交叉轴。当设置了项目尺寸时项目尺寸不变，项目行拉伸至填满交叉轴

加上align-content   ：用于多行排列时设置项目在交叉轴方向上的对齐方式，以及分配项目之间及其周围多余的空间。

  1. /* pages/index/index.wxss */
  2. .container{
  3.   display: flex;
  4.   flex-direction: row;
  5.   align-content: flex-start;
  6.   flex-wrap: wrap;
  7. }
  8. .txt01{
  9.   /* align-self: flex-start; */
  10.   width: 200rpx;
  11.   height: 200rpx;
  12.   background-color: red;
  13. }
  14. .txt02{
  15.   /* align-self: flex-end; */
  16.   width: 200rpx;
  17.   height: 200rpx;
  18.   background-color: green;
  19. }
  20. .txt03{
  21.   /* align-self: flex-start; */
  22.   width: 500rpx;
  23.   height: 200rpx;
  24.   background-color: blue;
  25. }
  26. .txt04{
  27.   /* flex: none; */
  28.   width: 300rpx;
  29.   height: 200rpx;
  30.   background-color: yellow;
  31. }
  32. .txt05{
  33.   /* flex-shrink: 1;   */
  34.   width: 300rpx;
  35.   height: 200rpx;
  36.   background-color:greenyellow;
  37. }

  1. /* pages/index/index.wxss */
  2. .container{
  3.   height: 100vh;
  4.   display: flex;
  5.   flex-direction: row;
  6.   align-content: flex-end;
  7.   flex-wrap: wrap;
  8. }
  9. 。。。。。。。。

  1. /* pages/index/index.wxss */
  2. .container{
  3.   height: 100vh;
  4.   display: flex;
  5.   flex-direction: row;
  6.   align-content: center;
  7.   flex-wrap: wrap;
  8. }
  9. 。。。。。

  1. /* pages/index/index.wxss */
  2. .container{
  3.   height: 100vh;
  4.   display: flex;
  5.   flex-direction: row;
  6.   align-content: space-around;
  7.   flex-wrap: wrap;
  8. }
  9. 。。。。。。

  1. /* pages/index/index.wxss */
  2. .container{
  3.   height: 100vh;
  4.   display: flex;
  5.   flex-direction: row;
  6.   align-content: space-between;
  7.   flex-wrap: wrap;
  8. }
  9. 。。。。。。。。。。。

四、项目的属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

4.1 order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。


  2. .item {
  3.   order: <integer>;
  4. }

4.2 flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。


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

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

4.3 flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。


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

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

4.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。


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

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

4.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。


  2. .item {
  3.   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  4. }

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

4.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。


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

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

项目属性

1、order

属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

  1.  /* pages/index/index.wxss */
  2.  .container{
  3.    display: flex;
  4.    flex-direction: row;
  5.    flex-wrap: wrap;
  6.  }
  7.  .txt01{
  8.    order: 2;
  9.    width: 200rpx;
  10.    height: 200rpx;
  11.    background-color: red;
  12.  }
  13.  .txt02{
  14.    order: 1;
  15.    width: 200rpx;
  16.    height: 200rpx;
  17.    background-color: green;
  18.  }
  19.  .txt03{
  20.    order: 0;
  21.    width: 200rpx;
  22.    height: 200rpx;
  23.    background-color: blue;
  24.  }
  25.  .txt04{
  26.    order: 4;
  27.    width: 200rpx;
  28.    height: 200rpx;
  29.    background-color: yellow;
  30.  }
  31.  .txt05{
  32.    order: 5;
  33.    width: 300rpx;
  34.    height: 300rpx;
  35.    background-color: snow;
  36.  }

2、flex-grow

属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

　如果所有项目的flex-grow属性都为0，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为1，其他项目都为0，则前者占据的剩余空间将比其他项多一倍。

  1.  /* pages/index/index.wxss */
  2.  .container{
  3.    display: flex;
  4.    flex-direction: row;
  5.    flex-wrap: wrap;
  6.  }
  7.  .txt01{
  8.    flex-grow: 0;
  9.    width: 200rpx;
  10.    height: 200rpx;
  11.    background-color: red;
  12.  }
  13.  .txt02{
  14.    flex-grow: 1;
  15.    width: 200rpx;
  16.    height: 200rpx;
  17.    background-color: green;
  18.  }
  19.  .txt03{
  20.    flex-grow: 0;
  21.    width: 200rpx;
  22.    height: 200rpx;
  23.    background-color: blue;
  24.  }

3、flex-shrink

属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效

  1.  rap: nowrap;
  2.  }
  3.  .txt01{
  4.    flex-shrink: 1;
  5.    width: 200rpx;
  6.    height: 200rpx;
  7.    background-color: red;
  8.  }
  9.  .txt02{
  10.    flex-shrink: 0;
  11.    width: 200rpx;
  12.    height: 200rpx;
  13.    background-color: green;
  14.  }
  15.  .txt03{
  16.    flex-shrink: 1;
  17.    width: 200rpx;
  18.    height: 200rpx;
  19.    background-color: blue;
  20.  }
  21.  .txt04{
  22.    flex-shrink: 1;
  23.    width: 200rpx;
  24.    height: 200rpx;
  25.    background-color: yellow;
  26.  }
  27.  .txt05{
  28.    flex-shrink: 1;
  29.    width: 300rpx;
  30.    height: 300rpx;
  31.    background-color: snow;
  32.  }

4、flex-basis

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

  1.  /* pages/index/index.wxss */
  2.  .container{
  3.    display: flex;
  4.    flex-direction: row;
  5.    flex-wrap: nowrap;
  6.  }
  7.  .txt01{
  8.    flex-basis: auto;
  9.    /* width: 200rpx;
  10.    height: 200rpx; */
  11.    background-color: red;
  12.  }
  13.  .txt02{
  14.    flex-basis: auto;
  15.    /* width: 200rpx;
  16.    height: 200rpx; */
  17.    background-color: green;
  18.  }
  19.  .txt03{
  20.    flex-basis: 350rpx;
  21.    /* width: 200rpx;
  22.    height: 200rpx; */
  23.    background-color: blue;
  24.  }

5、flex

属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

  1.  /* pages/index/index.wxss */
  2.  .container{
  3.    display: flex;
  4.    flex-direction: row;
  5.    flex-wrap: nowrap;
  6.  }
  7.  .txt01{
  8.    flex:0 1 auto; // flex-grow:0;flex-shrink:1;flex-basis:auto
  9.    width: 200rpx;
  10.    height: 200rpx;
  11.    background-color: red;
  12.  }
  13.  .txt02{
  14.    flex: 0 1 auto;
  15.    width: 200rpx;
  16.    height: 200rpx;
  17.    background-color: green;
  18.  }
  19.  .txt03{
  20.    flex: 0 1 auto;
  21.    width: 200rpx;
  22.    height: 200rpx;
  23.    background-color: blue;
  24.  }

  1.  /* pages/index/index.wxss */
  2.  .container{
  3.    display: flex;
  4.    flex-direction: row;
  5.    flex-wrap: nowrap;
  6.  }
  7.  .txt01{
  8.    flex:auto;   // flex-grow:1;flex-shrink:1;flex-basis:auto
  9.    width: 200rpx;
  10.    height: 200rpx;
  11.    background-color: red;
  12.  }
  13.  .txt02{
  14.    flex: auto;
  15.    width: 200rpx;
  16.    height: 200rpx;
  17.    background-color: green;
  18.  }
  19.  .txt03{
  20.    flex: auto;
  21.    width: 200rpx;
  22.    height: 200rpx;
  23.    background-color: blue;
  24.  }

  1.  1 /* pages/index/index.wxss */
  2.  2 .container{
  3.  3   display: flex;
  4.  4   flex-direction: row;
  5.  5   flex-wrap: nowrap;
  6.  6 }
  7.  7 .txt01{
  8.  8   flex:none;   // flex-grow:0;flex-shrink:0;flex-basis:auto
  9.  9   width: 200rpx;
  10. 10   height: 200rpx;
  11. 11   background-color: red;
  12. 12 }
  13.  .txt02{
  14.    flex: none;
  15.    width: 200rpx;
  16.    height: 200rpx;
  17.    background-color: green;
  18.  }
  19.  .txt03{
  20.    flex: none;
  21.    width: 200rpx;
  22.    height: 200rpx;
  23.    background-color: blue;
  24.  }
  25.  .txt04{
  26.    flex: none;
  27.    width: 200rpx;
  28.    height: 200rpx;
  29.    background-color: yellow;
  30.  }

6、align-self

属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

该属性可能取6个值（auto | flex-start | flex-end | center | baseline | stretch;），除了auto，其他都与align-items属性完全一致

  1.  /* pages/index/index.wxss */
  2.  .container{
  3.    display: flex;
  4.    flex-direction: column;
  5.  
  6.  }
  7.  .txt01{
  8.    align-self: flex-start;
  9.    width: 200rpx;
  10.    height: 200rpx;
  11.    background-color: red;
  12.  }
  13.  .txt02{
  14.    align-self: flex-end;
  15.    width: 200rpx;
  16.    height: 200rpx;
  17.    background-color: green;
  18.  }
  19.  .txt03{
  20.    align-self: flex-start;
  21.    width: 200rpx;
  22.    height: 200rpx;
  23.    background-color: blue;
  24.  }

微信小程序—Flex布局的更多相关文章

  1. 微信小程序~Flex布局

    有一点需要注意的是,你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全.开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”.

  2. 微信小程序flex布局

    一.flex布局基础 二.相对定位和绝对定位   flex的容器和元素   主轴(左-右),交叉轴(上-下)     flex容器属性详解 flex-direction 决定元素的排列方向(默认row ...

  3. 微信小程序-flex布局中align-items和align-self区别

    首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...

  4. 微信小程序 | flex布局属性

    flex-direction 主轴方向 row: 横向 row-reverse: 横向倒序 column: 纵向 column-reverse: 纵向倒序; flex-wrap 元素排列换行 nowr ...

  5. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  6. uniapp 小程序 flex布局 v-for 4栏展示

    注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...

  7. 关于微信小程序<radio-group>布局排列

    微信小程序更新以后今天<radio>全部变成垂直排列了,布局乱了. 一开始尝试给外层<view>添加display:flex;flex-direction:row:未果. 后来 ...

  8. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  9. 小程序Flex布局

    容器属性 容器支持的属性有:display:通过设置display属性,指定元素是否为Flex布局.flex-direction:指定主轴方向,决定了项目的排列方式.flex-wrap:排列换行设置. ...

随机推荐

  1. python I/O编程

    1.文件读写 使用open打开文件,f=open('/user/test.txt','r'),r表示可读 如果文件不存在,则抛出IOError 文件打开,则用read()方法进行读取 最后关闭用clo ...

  2. 拥有 GitHub 开源项目的小伙伴，免费申请 JetBrains 全家桶的全流程详解

    工欲善其事,必先利其器.如果您想要学习 Java.PHP.Ruby.Python.JavaScript.Objective-C..NET 中的任何一种开发技术,国际知名且屡获殊荣的 JetBrains ...

  3. echarts圆饼图设置默认选中项并在中间显示文字

    效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...

  4. TensorFlow——tf.contrib.layers库中的相关API

    在TensorFlow中封装好了一个高级库,tf.contrib.layers库封装了很多的函数,使用这个高级库来开发将会提高效率,卷积函数使用tf.contrib.layers.conv2d,池化函 ...

  5. 深入理解 Java 并发锁

    本文以及示例源码已归档在 javacore 一.并发锁简介 确保线程安全最常见的做法是利用锁机制(Lock.sychronized)来对共享数据做互斥同步,这样在同一个时刻,只有一个线程可以执行某个方 ...

  6. RedisCluster linux下批量删除 key

    Redis Cluster linux下批量删除键 说明 使用时不支持传入参数 , 如 redis_batch_del.sh , 因为在linux下 会自动将 * 解析为当前目录下所有文件名, 目前还 ...

  7. 【一起学源码-微服务】Hystrix 源码二：Hystrix核心流程：Hystix非降级逻辑流程梳理

    说明 原创不易,如若转载 请标明来源! 欢迎关注本人微信公众号:壹枝花算不算浪漫 更多内容也可查看本人博客:一枝花算不算浪漫 前言 前情回顾 上一讲我们讲了配置了feign.hystrix.enabl ...

  8. OpenGLES思维导图

    两本书到头来就只剩下了这三张图了吧.想要原图:https://github.com/wangwangla/biji/blob/master/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8 ...

  9. [洛谷P3254] [网络流24题] 圆桌游戏

    Description 假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri (i =1,2,--,m). 会议餐厅共有n 张餐桌,每张餐桌可容纳ci (i =1,2,--,n) ...

  10. maven-assembly-plugin入门

    愿文地址:https://www.jianshu.com/p/e8585a991e8e 当你使用 Maven 对项目打包时,你需要了解以下 3 个打包 plugin,它们分别是 plugin func ...