上汽集团全资子公司、国泰海通全资子公司等新设股权投资合伙企业
2025年12月15日 14:29
36氪获悉,爱企查App显示,近日,宁波甬元隽昇股权投资合伙企业(有限合伙)成立,出资额10.9亿元人民币,经营范围包括以私募基金从事股权投资、投资管理、资产管理等活动。合伙人信息显示,该企业由上汽集团全资子公司上海汽车集团金控管理有限公司、国泰海通全资子公司国泰君安证裕投资有限公司等共同出资。
.item {
flex-grow: 0; /* 不扩展 */
flex-shrink: 1; /* 可以收缩 */
flex-basis: 0%; /* 基础尺寸为 0 */
}
.item {
flex-grow: 1; /* 扩展填满剩余空间 */
flex-shrink: 1; /* 可以收缩 */
flex-basis: 0%; /* 基础尺寸为 0,完全由 grow 决定 */
}
.item {
flex-grow: 0; /* 不扩展 */
flex-shrink: 0; /* 不收缩 */
flex-basis: auto; /* 基于内容的固有尺寸 */
}
.item {
flex-grow: 1; /* 扩展填满剩余空间 */
flex-shrink: 1; /* 可以收缩 */
flex-basis: auto; /* 基于内容的固有尺寸 */
}
| 属性 | 何时使用 | 典型场景 |
|---|---|---|
| flex: 0 | 元素有固定尺寸,不占额外空间 | 按钮、图标、固定宽度组件 |
| flex: 1 | 需要占满剩余空间 | 主内容区、等分布局 |
| flex: none | 保持原始尺寸,不被压缩 | Logo、重要按钮、图片 |
| flex: auto | 内容驱动的弹性布局 | 标签页、表单控件、响应式组件 |
记忆技巧:
/* flex: 0 */
flex-grow: 0; /* 不扩展 ✓ 相同 */
flex-shrink: 1; /* 可以收缩 ⚠️ 关键区别 */
flex-basis: 0%; /* 基础尺寸为 0 */
/* flex: none */
flex-grow: 0; /* 不扩展 ✓ 相同 */
flex-shrink: 0; /* 不能收缩 ⚠️ 关键区别 */
flex-basis: auto; /* 基于内容尺寸 */
需要固定尺寸的元素?
↓ 是
容器空间不足时,这个元素可以被压缩吗?
↓ 可以 ↓ 不可以
flex: 0 flex: none
(适应性固定) (刚性固定)
当你不确定用哪个时,问自己:
如果答案是"可以压缩" → 用 flex: 0
如果答案是"绝不能变" → 用 flex: none
/* flex: 1 */
flex-grow: 1; /* 扩展 ✓ 相同 */
flex-shrink: 1; /* 收缩 ✓ 相同 */
flex-basis: 0%; /* 忽略内容尺寸 ⚠️ 关键区别 */
/* flex: auto */
flex-grow: 1; /* 扩展 ✓ 相同 */
flex-shrink: 1; /* 收缩 ✓ 相同 */
flex-basis: auto; /* 基于内容尺寸 ⚠️ 关键区别 */
// 容器宽度:600px
<Flex style={{width: '600px', border: '1px solid red'}}>
<div style={{flex: 1, background: 'lightblue', textAlign: 'center'}}>
短
</div>
<div style={{flex: 1, background: 'lightgreen', textAlign: 'center'}}>
这是一段比较长的文本内容
</div>
<div style={{flex: 1, background: 'lightyellow', textAlign: 'center'}}>
中等长度
</div>
</Flex>
flex: 1 的结果:
<Flex style={{width: '600px', border: '1px solid red'}}>
<div style={{flex: 'auto', background: 'lightblue', textAlign: 'center'}}>
短
</div>
<div style={{flex: 'auto', background: 'lightgreen', textAlign: 'center'}}>
这是一段比较长的文本内容
</div>
<div style={{flex: 'auto', background: 'lightyellow', textAlign: 'center'}}>
中等长度
</div>
</Flex>
flex: auto 的结果:
<Flex style={{width: '500px'}} gap={16}>
{/* 按钮 */}
<Button style={{flex: 1}}>确定</Button>
<Button style={{flex: 1}}>取消</Button>
<Button style={{flex: 1}}>重置数据</Button>
</Flex>
flex: 1 的效果:
<Flex style={{width: '500px'}} gap={16}>
{/* 按钮 */}
<Button style={{flex: 'auto'}}>确定</Button>
<Button style={{flex: 'auto'}}>取消</Button>
<Button style={{flex: 'auto'}}>重置数据</Button>
</Flex>
flex: auto 的效果:
核心原则:需要视觉统一用 flex: 1,需要内容自然用 flex: auto!
需要元素填满剩余空间?
↓ 是
希望所有元素完全等分吗?
↓ 是 ↓ 否
flex: 1 flex: auto
(强制等分) (内容驱动)
想象分蛋糕:
flex: 1的原因避免了内容的干扰
在不同屏幕尺寸下表现一致
flex: 1 计算更高效:
/* flex: 1 的计算 */
flex-basis: 0%; /* 跳过内容尺寸计算 */
/* 直接计算:剩余空间 ÷ flex-grow 总和 */
/* flex: auto 的计算 */
flex-basis: auto; /* 需要先计算内容尺寸 */
/* 然后计算:(剩余空间 - 内容尺寸) ÷ flex-grow 总和 + 内容尺寸 */
大家好,我是CC,在这里欢迎大家的到来~
书接上文,Intl 下的 Segmenter 对象可以实现对文本的分割,除此之外,还有对字符串比较、数字格式化、日期格式化等其他功能。
这篇文章先来看看字符串比较,现在来理论加实践一下。
Intl.Collator用于语言敏感的字符串比较。
基于 Collator 对象的排序规则进行比较。第一个字符串出现在第二个字符串之前则为负值,否则为正则,相等时则返回 0。
console.log(new Intl.Collator().compare("a", "c")); // -1
console.log(new Intl.Collator().compare("c", "a")); // 1
console.log(new Intl.Collator().compare("a", "a")); // 0
// 德语中,ä 使用 a 的排序
console.log(new Intl.Collator("de").compare("ä", "z"));
// -1
// 在瑞典语中,ä 排在 z 之后
console.log(new Intl.Collator("sv").compare("ä", "z"));
// 1
const testStrings = ['苹果', '香蕉', '橙子'];
// lookup:使用 BCP 47 规范的标准查找
const lookupCollator = new Intl.Collator('zh', {
localeMatcher: 'lookup'
});
// best fit:使用浏览器的最佳匹配算法(默认)
const bestFitCollator = new Intl.Collator('zh', {
localeMatcher: 'best fit'
});
console.log(testStrings.sort(lookupCollator.compare));
console.log(testStrings.sort(bestFitCollator.compare));
// ["橙子","苹果","香蕉"]
// ["橙子","苹果","香蕉"]
const words = ['数据', '数据库', '数学', '数字', '数值'];
// 用于排序的 Collator
const sortCollator = new Intl.Collator('zh-CN', {
usage: 'sort',
sensitivity: 'variant'
});
// 用于搜索的 Collator
const searchCollator = new Intl.Collator('zh-CN', {
usage: 'search',
sensitivity: 'base' // 搜索时更宽松
});
console.log('排序结果:', words.sort(sortCollator.compare));
// ["数据", "数据库", "数值", "数字", "数学"]
const searchTerm = '数';
const searchResults = words.filter(word =>
searchCollator.compare(word.slice(0, searchTerm.length), searchTerm) === 0
);
console.log(`搜索"${searchTerm}"的结果:`, searchResults);
// ["数据", "数据库", "数学", "数字", "数值"]
const pinyinExamples = [
['mā', 'ma'], // 声调差异
['lǜ', 'lu'], // 特殊字符差异
['zhōng', 'zhong'] // 音调符号差异
];
const pinyinAccentCollator = new Intl.Collator('zh-CN', {
sensitivity: 'accent', // 忽略声调差异
usage: 'search'
});
pinyinExamples.forEach(([a, b]) => {
const result = pinyinAccentCollator.compare(a, b);
console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 不匹配
// "lǜ" vs "lu": 不匹配
// "zhōng" vs "zhong": 不匹配
const pinyinBaseCollator = new Intl.Collator('zh-CN', {
sensitivity: 'base', // 忽略声调差异
usage: 'search'
});
pinyinExamples.forEach(([a, b]) => {
const result = pinyinBaseCollator.compare(a, b);
console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 匹配
// "lǜ" vs "lu": 匹配
// "zhōng" vs "zhong": 匹配
const pinyinCaseCollator = new Intl.Collator('zh-CN', {
sensitivity: 'case', // 忽略声调差异
usage: 'search'
});
pinyinExamples.forEach(([a, b]) => {
const result = pinyinCaseCollator.compare(a, b);
console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 匹配
// "lǜ" vs "lu": 匹配
// "zhōng" vs "zhong": 匹配
const pinyinVariantCollator = new Intl.Collator('zh-CN', {
sensitivity: 'variant', // 忽略声调差异
usage: 'search'
});
pinyinExamples.forEach(([a, b]) => {
const result = pinyinVariantCollator.compare(a, b);
console.log(`"${a}" vs "${b}": ${result === 0 ? '匹配' : '不匹配'}`);
});
// "mā" vs "ma": 不匹配
// "lǜ" vs "lu": 不匹配
// "zhōng" vs "zhong": 不匹配
const texts = [
'你好,世界!',
'你好世界',
'你好-世界',
'你好。世界',
'你好——世界'
];
const withPunctuation = new Intl.Collator('zh-CN', {
ignorePunctuation: false // 不忽略标点(默认)
});
const withoutPunctuation = new Intl.Collator('zh-CN', {
ignorePunctuation: true // 忽略标点
});
console.log(texts.sort(withPunctuation.compare));
console.log(texts.sort(withoutPunctuation.compare));
// [
// "你好-世界",
// "你好——世界",
// "你好,世界!",
// "你好。世界",
// "你好世界"
// ]
// [
// "你好,世界!",
// "你好世界",
// "你好-世界",
// "你好。世界",
// "你好——世界"
// ]
const items = [
'第1章 引言',
'第10章 总结',
'第2章 正文',
'第11章 附录',
'第20章 参考文献'
];
// 普通排序(字符串方式)
const regularCollator = new Intl.Collator('zh-CN', {
numeric: false // 默认
});
// 数字感知排序
const numericCollator = new Intl.Collator('zh-CN', {
numeric: true
});
console.log(items.slice().sort(regularCollator.compare));
console.log(items.slice().sort(numericCollator.compare));
// [
// "第10章 总结",
// "第11章 附录",
// "第1章 引言",
// "第20章 参考文献",
// "第2章 正文"
// ]
// [
// "第1章 引言",
// "第2章 正文",
// "第10章 总结",
// "第11章 附录",
// "第20章 参考文献"
// ]
const mixedList = [
'Apple',
'apple',
'Banana',
'banana',
'中文',
'China',
'china',
'苹果'
];
// 大写优先
const upperFirst = new Intl.Collator('zh-CN', {
caseFirst: 'upper',
sensitivity: 'case' // 需要区分大小写
});
console.log(mixedList.slice().sort(upperFirst.compare));
// ["Apple", "Banana", "China", "apple", "banana", "china", "中文", "苹果"]
// [
// "苹果",
// "中文",
// "Apple",
// "apple",
// "Banana",
// "banana",
// "China",
// "china"
// ]
// 小写优先
const lowerFirst = new Intl.Collator('zh-CN', {
caseFirst: 'lower',
sensitivity: 'case'
});
console.log(mixedList.slice().sort(lowerFirst.compare));
// ["apple", "banana", "china", "Apple", "Banana", "China", "中文", "苹果"]
// [
// "苹果",
// "中文",
// "apple",
// "Apple",
// "banana",
// "Banana",
// "china",
// "China"
// ]
// 不优先(默认)
const noCaseFirst = new Intl.Collator('zh-CN', {
caseFirst: false,
sensitivity: 'case'
});
console.log(mixedList.slice().sort(noCaseFirst.compare));
// [
// "苹果",
// "中文",
// "apple",
// "Apple",
// "banana",
// "Banana",
// "china",
// "China"
// ]
const words = ['张三', '李四', '王五', '赵六', '孙七'];
// 默认拼音排序
const defaultCollator = new Intl.Collator('zh-CN');
console.log(words.slice().sort(defaultCollator.compare));
// 尝试不同的 collation(如果支持)
try {
// 笔画排序(如果支持)
const strokeCollator = new Intl.Collator('zh-CN-u-co-stroke');
console.log(words.slice().sort(strokeCollator.compare));
} catch (e) {
console.log('\n笔画排序不支持:', e.message);
}
// 通过 Unicode 扩展键设置 collation
const localeWithCollation = 'zh-CN-u-co-pinyin'; // 拼音排序(默认)
const collator1 = new Intl.Collator(localeWithCollation);
console.log('\n通过 Unicode 扩展键设置 (拼音):', collator1.resolvedOptions().collation);
// 通过 options 参数覆盖
const collator2 = new Intl.Collator('zh-CN-u-co-stroke', {
collation: 'pinyin' // options 优先级更高
});
console.log('Options 覆盖 Unicode 扩展键:', collator2.resolvedOptions().collation);
const options = collator.resolvedOptions();
usedOptions.locale; // "de"
usedOptions.usage; // "sort"
usedOptions.sensitivity; // "base"
usedOptions.ignorePunctuation; // false
usedOptions.collation; // "default"
usedOptions.numeric; // false
在给定的 locales 数组中判断出 Collator支持的 locales。但是可能每个浏览器支持的不大一样。
const locales = ["ban", "id-u-co-pinyin", "de-ID"];
const options = { localeMatcher: "lookup" };
console.log(Intl.Collator.supportedLocalesOf(locales, options));
// ["id-u-co-pinyin", "de-ID"]
Intl.Collator可以根据当前环境或者手动设置的 Locale 以及字符串的大小写、音标、声调、标点符号和数字敏感度来实现字符串的排序和搜索;在构建国际化应用中,特别是在处理用户生成内容、搜索排序、数据展示等场景中,能确保应用遵循目标语言的正确规则。