CSS：如何将最后一个元素向左对齐
由于 justify-content: space-around 规则，当第 4 个块向下跳时，它变成了中间
我可以以某种方式仍然使用空格规则，但使最后一个块不要跳到中心，而是跳到左侧，就像屏幕截图中那样？PS我仍然需要 justify-content: space-around 因为它具有响应式边距
这是代码https://jsfiddle.net/s4fbtkyg/
<html>
<body>
<style>
.block{
background-color: grey;
flex-basis: 100px;
margin-bottom: 5px;
}
.container{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
</style>
<div class="container">
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
</div>
</body>
</html>
ibeautiful浏览 56回答 1
1回答
-
莫回无
您可能需要考虑使用 CSS 网格来完成此任务：grid-template-columns: repeat(auto-fit, 100px); //100px being the width of your choosing这是代码：超文本标记语言<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body><div class="container"> <div class="block">1</div> <div class="block">2</div> <div class="block">3</div> <div class="block">4</div> </div></body></html>CSS.block{ background-color: grey;}.container{ display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); justify-content: space-around; //you can still use justify-content: space-around}小提琴：小提琴链接
随时随地看视频慕课网APP
相关分类
Html5
