浅谈display:flex

- *1* [浅谈display:flex对div宽度和高度继承的影响](https://blog.csdn.net/m0_52518047/article/details/124256841)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip...

### 关于 WXSS 中 `display: flex` 布局的使用方法 在微信小程序中，WXSS 支持 CSS 的 Flexbox 布局模型。这使得开发者可以更灵活地控制页面元素的排列方式。 #### 使用 `display: flex` 当容器设置为 `display: flex` 后，其子项会自动成为弹性盒子布局中的项目。此时可以通过一系列属性来调整这些项目的排列方式[^1]。 对于 `.box` 类定义如下： ```css .box { display: flex; } ``` 此段代码将使拥有该类名的 HTML 或 WXML 元素变为一个弹性容器，内部所有直接子节点都将成为它的成员并遵循后续指定的行为准则[^2]。 #### 控制主轴方向与顺序 默认情况下，Flex 容器内的条目沿水平线从左向右依次放置；然而，可通过改变 `flex-direction` 属性来自由设定这一趋势的方向以及反转显示次序。 - **行内（横向）** ```css /* 默认值 */ .row-container { display: flex; flex-direction: row; /* 左至右 */ } /* 反转 */ .reversed-row-container { display: flex; flex-direction: row-reverse; /* 右到左 */ } ``` - **垂直（纵向）** ```css .column-container { display: flex; flex-direction: column; /* 上往下 */ } .reversed-column-container { display: flex; flex-direction: column-reverse; /* 下往上 */ } ``` 上述配置允许创建不同走向的内容流，在构建响应式设计时尤为有用。 #### 对齐方式 为了更好地掌控组件间的相对位置关系，提供了多种对齐选项用于微调各个维度上的间距分布情况。 - 主轴上居中 ```css .center-on-main-axis { display: flex; justify-content: center; } ``` - 交叉轴两端对齐 ```css .stretch-across-cross-axis { display: flex; align-items: stretch; } ``` 以上仅列举了一些基础的应用场景，实际开发过程中可根据需求组合运用更多特性以实现复杂多变的设计效果。