微信小程序中的Flex布局介绍--7月老师课程的学习笔记

时间：2024-03-07 15:09:52
觉得前端这块真的是很容易忘，看完视频如果不经常去用的话，可能过个几天就会忘很多，因此，特地做一个学习笔记，方便之后快速回顾、学习。

1.使用

display:flex

 

     用于控制布局方式，flex布局，使用flex布局会清除块里子元素（即flex-items）的block布局的属性，（但不会消除块的本身的block布局属性，通过将display设置为inline-flex，可以消除块的本身的block布局，转而变为自适应而不是占一整行）

    默认的flex布局的排列方向是同行排列

    2.    flex-direction属性：

控制排列方向，并控制了“主轴”的方向（第4条会讲到）。有两个可选的取值："row"与"column"，以及两个翻转的取值"row-reserve"与"column-reserve"，分别可以使其逆序。

在不设置该属性值时，默认为"row"。

3.    justify-content属性:

设置了主轴的（后面会提到）对齐方向，有5个常用的取值:

                1.  flex-start :在没有设置flex-direction属性为"xxx-reserve"时，上边、左边为start，下边、右边为end，设置flex-direction属性为"xxx-reserve"时，则相反。
                2.  flex-end
                3.  center 居中
                4. space-between： 均匀分布，最开始与最后分别与两端对齐，而中间的则等间距分布
                5.  space-around：等距分布，对于每一个flex item子项，两侧的距离均相等

4.主轴与交叉轴：  align-items属性

    该属性控制了交叉轴的对齐方式。
       对于justify-content属性而言，可以让flex-direction方向上呈某一分布，例如：
            
 
这里我们设置了flex-direction属性值为column，即列向排列，如果我们希望其在列向是居中的，我们可以通过justify-content属性设置为center来实现，但是，justify-content只能调整flex-direction方向（主轴方向）上的分布，而不能调整另一个轴的分布。 
  假如我们希望其既在列方向上居中，又在行方向上居中，那么我们就可以通过align-items属性来实现，该属性就是控制了交叉轴的排布方式。
    在二维平面上，有一个水平轴和一个竖直轴，这也就是主轴与交叉轴所指的两个轴，flex-direction指定了主轴，另外一个方向的轴就是交叉轴。
再给一个例子，还是上面的图，如果我们希望水平轴居中而竖直轴向上对齐，因为这里flex-direction属性的值为column，即主轴方向是水平轴，我们只需将控制主轴对齐方向的justify-content属性的值设置为flex-start即可。
    这里的主要思路，就是要将水平方向与竖直方向跟主轴和交叉轴对应起来。
 
另外，flex-direction属性中，加上reserve后，主轴方向会有所不同吗？
第一个箭头从左指向右，即为row的方向
第二个箭头从右指向左，即为row-reserve的方向
可见，不管是row还是row-reserve，主轴都是水平轴，但是主轴的方向会有一定差别，影响了flex-start与flex-end。
column与column-reserve同理。
 
align-items与justify-content属性相似，同样有5个可选的取值，其中
  1.  flex-start
  2. flex-end
  3. center
这三个值是相同的。
另外，align-items还有两个可取的值分别是
  1. stretch(拉伸)：注意，该属性值仅在不设置交叉轴的长度时有效。
比如，这里主轴为row，而交叉轴为竖直轴，我们将交叉轴的长度--height不显示地设置值，并将align-items属性值设置为stretch，即在交叉轴方向上实现了拉伸效果。
 
如果设置了交叉轴的长度，即使设置为stretch，也不会生效：
2.baseline(基线对齐):使每个flex-items里的文字的底部（即基线）是对齐的
例如，这里我将三个颜色块的字体大小分别修改为26px,20px,10px，如果不使用baseline属性，可以发现，三个子元素（三个view块）是对齐了，但是子元素里的文字并不是对齐的。
而如果设置了baseline属性值，则三个子元素的文字的底部是对齐的。
 
对于具体的哪里是start，哪里是end，其实不必死记，因为也就两个属性，且其他内容比较多，大可自己去试，上面的内容主要在于多应用、理解原理，就会慢慢熟悉，不必死记，因为这样也容易忘。

5.flex-wrap属性:flex换行

对于iPhone6，屏幕宽度是375px,假如我们将每个元素的width设置为150px,总共宽450px,超过了屏幕宽度，理论上说应该是会换行的，但是实际上并没有，反而，实际的三个view元素的width都是125px。
也就是说，如果不设置换行，且设置的总的宽度超过了屏幕宽度时，flex布局会让每个元素均分屏幕宽度。即375/3=125px
如果我们希望每个元素的宽度就占150px,那必然会换行，这时，就需要通过flex-wrap属性来设置：
这时，每个view元素块的宽度就是150px。
但是，可以看到下面的蓝色块与上面两块是有间距的，这也是flex布局换行时的默认特性，让换行的元素保持居中(可以看到，这里蓝色块既是水平居中，又是竖直居中)，有间距，就说明这个container块是有富余的，如果我们想要消除间距，我们可以通过消除富余来实现。
这里每个元素块的高度为100px，最开始我们的container块的高度为400px，两行的元素，只需200px,当我们将container块的高度修改为所需的200px，可以看到，这时就没有了间距。
 
flex-wrap属性有2个可选的取值：
  1.     nowrap。即不换行，这时flex采取的就是元素均分屏幕宽度。这个值也是该属性的默认值
  2.     wrap
 
 

相关文章