主轴的基准尺寸定义
主轴基准尺寸，优先级比width和height大
依据的是当前哪个为主轴
如果flex-direction: row; 即主轴为水平，表示flex-basis 为width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主轴的基准尺寸定义</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
padding-left: 50px;
padding-top: 15px;
}
article {
border: solid 5px silver;
width: 500px;
height: 280px;
display: flex;
flex-direction: row;
}
article * {
flex-basis: 100px;
max-width: 70px; /* 优先级最高 */
/* flex-grow: 1; */ /* 缩放 */
/* width: 100px; */
height: 100px;
background: blueviolet;
background-clip: content-box;
padding: 10px;
border: solid 1px blueviolet;
box-sizing: border-box;
font-size: 30px;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
</article>
</body>
</html>
可以看到每个div的宽度为 70px
如果我们把 max-width 注释掉，那么此时使用的就是
flex-basis: 100px;
每个div的宽度为100px
那么此时效果如下图
扫一扫
514
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
