-
CSS 移动端键盘弹出时布局被压缩
现象 页面背景图在键盘弹出时被压缩。 使用的是Flex布局。 解决 在布局父容器添加样式。 使用适配移动端的dvh。动态View Point。 dvh中的第一个d是动态的意思（Dynamic）。 .
-
CSS 使用 flex-shrink 0 解决 flex 1 布局中元素设置的高度不生效问题
现象 代码 .container { flex: 1; overflow-y: scroll; } 原因 flex: 1依赖容器高度，没有容器高度，flex: 1会无限拉伸，把元素
-
CSS 实现加载中旋转进度条
CSS /* 外层容器：让 Loading 垂直+水平居中（可根据需求调整） */ .loadingContainer { user-select: none; flex:1;
-
CSS 垂直水平居中
absolute + transform <style> .center { position: absolute; top: 50%; le
-
CSS Margin 塌陷
Margin Collapse 垂直方向上，两个相邻的块级元素（或者父子元素）的margin会重叠，取较大值作为最终生效的margin，若有负的Margin则取绝对值最大的，正负抵消后计算。 相邻块
-
CSS 解决绝对布局没有在父容中定位而是在根节点定位问题
现象 根节点设置了flex: column布局，其中有一个子元素，在子元素中需要使用绝对布局，将子元素的子元素定位在右上角。 但使用了position: absolute子元素的子元素定位在了根节点
-
CSS flex gap 属性设置子元素间隙
gap gap属性设置在父元素样式上，表示flex布局中子元素之间的间隙。 左右两边的子元素是没有margin-left和margin-right的。 flex-direction: column上
-
CSS flex 布局子元素高度没有被撑开
示例代码 id=middle的子元素没有顶部对齐。 <div style="display: flex;align-items: center"> <div>123<br>123<br>12
-
CSS flex: 1 子元素占据父元素剩余空间
场景 row横向实现：左右两个图片，中间文字的布局。 column纵向实现：底部栏永远在屏最底下，即使高度不够时也在屏幕底部。（高度够时需滚动才展示） 代码 横向：中间文字使用flex: 1占据剩余
-
CSS 左右两边始终各占50%
场景 左右两边是两张产品图片，即使右边部分不可见，左边也只占屏幕宽度的50%，不铺满。 思路 右边加一个空的元素，包裹需要控制隐藏或显示的元素。 代码 主要代码：子元素设置flex: 1，且按需显示
-
uni-app image 元素在 flex column 布局下宽度为 0 的问题
现象 在flex column布局中，image元素指定了width: 100%，但实际渲染时宽度变为0了。 去掉width: 100%，图片就有实际宽度了。 原因 在flex-direction:
-
uni-app flex column 布局中图片高度被压缩
场景 需要给根元素设置背景，所以给根元素设置了height: 100vh以保证背景能覆盖整个屏幕。 但此时发现图片mode="widthFix"、style="width: 100%"，高度被压缩了
-
uni-app flex 1 纵向无法占据全部高度
场景 需要给根元素设置背景以保证整个屏幕有背景色。 设置了子元素flex: 1却没有占据整个屏幕。 解决方法 设置根元素min-height: 100vh。
-
uni-app wu-calendar 解决抖音小程序中布局错乱问题
现象 在抖音小程序中，wu-calendar 1.5.6版本中，日期item都挤压在一起。 原因 flex布局没有添加属性flex: 1。 解决 uni_modules-wu-calendar-co
2025-08-03, Views: 758 , Topics: uni-app wu-calendar flex
-
CSS 网站信息标签放置于浏览器底部
需求 对于网站信息的元素块，当页面元素不足以填充满整个浏览器高度时，仍然需要置于底部。 flex 布局 使用flex-direction: column及flex: 1。 <!DOCTYPE htm
-
CSS flex 布局实现层叠效果
需求 图片一右边的上方叠加图片二。 实现 使用flex实现垂直方向的居中对齐。 使用absolute绝对布局，让图片二脱离文档流。 完整代码 <!DOCT