flex-wrap用于控制Flexbox子元素是否换行,可选值为nowrap(不换行)、wrap(允许换行)和wrap-reverse(反向换行),常与flex-direction配合实现响应式布局。

flex-wrap 是 CSS 中用于控制弹性盒子(Flexbox)内子元素是否换行以及如何换行的属性。默认情况下,弹性容器中的子元素会尽可能地挤在一行内显示,但当容器空间不足时,使用 flex-wrap 可以让子元素自动换行或换列。
flex-wrap 的取值
该属性有三个可选值:- nowrap:默认值,所有子元素都排列在一行(或一列)上,不换行。即使空间不够,也会压缩子元素或溢出容器。
- wrap:允许子元素换行。当主轴方向空间不足时,子元素会折到下一行,新行在原行的下方(水平布局时)。
- wrap-reverse:与 wrap 相反,子元素也会换行,但新行出现在原行的上方(即行的排列顺序反转)。
使用场景示例
比如有一个宽度有限的容器,内部包含多个等宽的卡片:
.container {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 10px;
}
.card {
flex: 0 0 200px; / 固定宽度,不伸缩 /
}
当容器宽度不足以容纳所有卡片在一行时,flex-wrap: wrap 会让卡片自动折行显示,形成类似网格的效果。与 flex-direction 的关系
flex-wrap 的行为会受到 flex-direction 的影响。例如:- 当 flex-direction: row 时,换行是垂直方向(从上到下)。
- 当 flex-direction: column 时,换行是水平方向(从左到右或右到左,取决于 wrap 类型)。
基本上就这些。合理使用 flex-wrap 能让你的弹性布局更灵活,适应不同屏幕尺寸。不复杂但容易忽略。
本文档主要讲述的是关于Objective-C手动内存管理的规则;在ios开发中Objective-C 增加了一些新的东西,包括属性和垃圾回收。那么,我们在学习Objective-C之前,最好应该先了解,从前是什么样的,为什么Objective-C 要增加这些支持。有需要的朋友可以下载看看









