极客观点
项目管理
HarmonyOS
有了 flex: 0 0 25%; 还要加 max-width: 25%; 吗？
做页面栅格的时候，chatGPT 给了我下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Equivalent HTML</title>
<style>
.section,
.section-light,
.section-dark,
.section-gray {
display: flex;
padding: 8px;
}
.section > div,
.section-light > div,
.section-dark > div,
.section-gray > div {
padding: 8px;
border: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="section" style="display: flex; flex-wrap: wrap;">
<div style="flex: 0 0 100%; max-width: 100%;">
col
</div>
</div>
<div class="section-light" style="display: flex; flex-wrap: wrap;">
<div style="flex: 0 0 50%; max-width: 50%;">
col-12
</div>
<div style="flex: 0 0 50%; max-width: 50%;">
col-12
</div>
</div>
<div class="section-dark" style="display: flex; flex-wrap: wrap;">
<div style="flex: 0 0 33.333%; max-width: 33.333%;">
col-8
</div>
<div style="flex: 0 0 33.333%; max-width: 33.333%;">
col-8
</div>
<div style="flex: 0 0 33.333%; max-width: 33.333%;">
col-8
</div>
</div>
<div class="section-gray" style="display: flex; flex-wrap: wrap;">
<div style="flex: 0 0 25%; max-width: 25%;">
col-6
</div>
<div style="flex: 0 0 25%; max-width: 25%;">
col-6
</div>
<div style="flex: 0 0 25%; max-width: 25%;">
col-6
</div>
<div style="flex: 0 0 25%; max-width: 25%;">
col-6
</div>
</div>
</body>
</html>
上面的做垂直分块的时候，同时使用了 flex: 0 0 25%; 和 max-width: 25%; ，但是我浅陋的以为，flex 的 25% 已经等效于 max-width: 25%; 了吧？在加一个 max-width: 25%; 有意义吗？
html5
不用max-width，里面的内容会将所在的容器撑大的