在
开发过程中经常会遇到类似的需求，多个item从左到右边排列，当父级div宽度不够时折行显示，但是当只有一行时，item居中布局
如下图所示：
(1)一行居中显示：
（2）多行向左对齐
之前开发思路是利用flex实现居中布局：
让UI给一个视觉限定，一行最多能显示多少个，比如5个，然后在代码中通过js限定死，当item个数超过5个，则让其折行
<div className={students.length <= 4 ? 'single-line' : 'multi-line'}>
{
student.map(function(){
return <div class='item'></div>
})
}
</div>
.single-line {
display: flex;
justify-content: center;
}
.multi-line {
display: flex;
justify-content: flex-start;
}
这样虽然能达到效果，但是通过js控制始终不够灵活，昨天看《css世界》那本书，发现还有一种方式可以实现: display: inline-block;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<div class='list'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
</div>
</body>
</html>
.container {
padding: 10px;
width: 600px;
text-align: center;
border: 1px solid #000;
}
.list {
display: inline-block;
text-align: left;
}
.item {
display: inline-block;
width: 80px;
border: 1px solid #f00;
height: 200px;
}
扫一扫
2030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
