微信小程序View的布局

横向布局or竖向布局=>设置属性 flex-direction

设置元素在横向上的布局方向，需要设置 justify-content 属性

设置元素在纵向上的布局方向，需要设置 align-items 属性

用于控制子 View 是否换行=>设置flex-wrap 属性

在日常开发中可能会遇到父元素设置flex布局，子元素再去设置宽度无效的问题

当子元素的宽度总和小于父元素的宽度的时候，是有效的。但是当子元素宽度总和大于父元素宽度的时候。子元素的宽度就自适应了。

造成此问题的原因是因为，felx布局下有一个属性flex-shrink

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。0代表不会收缩

解决办法

1子元素设置

2子元素使用min-width代替width (此方法一般起不到很大的作用，只能解决宽度失效的问题，但会带来很多副作用：比如当子元素内容超出长度是，子元素的宽度就不再固定)

3子元素设置

浮动布局的优点就是比较简单，兼容性也比较好。

缺点是浮动元素是脱离文档流，要做清除浮动，否则可能会出现高度塌陷等问题。

绝对定位布局优点: 很快捷，设置很方便

但是脱离文档流的, 可能会造成重叠元素

在flex布局不兼容的时候，可以尝试表格布局。

CSS基础（float属性与清除浮动）

三栏布局的5种解决方案及优缺点

刚开始开发css或者小程序布局时, 都会遇到这样的问题, 当我们同时使用 flex布局与position:absolute/fixed的时候, 无论怎么修改都达不到最终效果, 如下图所示:

我想在白色区域横向布局这个四组文字, 虽然我设置display:flex, 方向也指向flex-direction:row, 但是最终显示出来还是如左图所示 原因是因为白色底图(shape_box)布局采用的是position:fixed的形式, 这时候文字的d性盒子布局已经失效了, 导致达不到最终效果;

 那么如何解决这种问题呢  我们仅需要在白色底图外层在套一个盒子, 然后最外层盒子使用position:fixed方式布局, 里面都是用flex布局, 效果如下图, 就解决了这类问题;

常用的居中对齐方式有很多种例如：

text-align:center;

align-items:center;

justify-content: center;

margin: auto; #子容器在父容器中居中

但是在view中的文字对齐却不能简单的使用text-align: center;来实现，这种办法只能实现文字的水平居中，

要实现水平垂直居中

可使用如下方案

使用flex布局控制其中的文字水平和垂直居中

设置了text-align 和 line-height属性 实现水平和垂直方向居中，在iOS端显示正常居中。但在Android机型特别是小米手机上仅水平居中，垂直方向上会向上偏移。

网上大佬表示：

通过上述，自己尝试了下

PS：后来又尝试使用flex布局 控制居中，发现在iOS和Android上显示正常居中了，不清楚是否是小程序后来实现了兼容。

Android浏览器下line-height垂直居中为什么会偏离？

以上就是关于微信小程序View的布局全部的内容，包括:微信小程序View的布局、解决flex布局导致子元素的宽度无效的问题、小程序: 三栏布局的五种实现方式及优缺点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！