html - 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>
解决方案
您可能需要考虑使用 CSS 网格来完成此任务:
grid-template-columns: repeat(auto-fit, 100px); //100px being the width of your choosing
这是代码:
HTML
<!DOCTYPE html>
<html lang="en">
<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
}
小提琴:小提琴链接
推荐阅读
- python - 如何将 for 循环中的每个迭代分配给数据库存储的变量
- encryption - 如何找到具有一组字符串输入和十六进制输出的解密算法?
- javascript - 尽管使用了 jQuery,但 datepicker 无法正常工作
- ios - popToRootViewControllerAnimated:总是返回 null
- cordova - 如何解决 Playstore 中的图片上传问题?
- java - 我从 Spring Boot 安全设置中收到“访问此资源需要完全身份验证”响应
- scala - Scala 类型声明中的 Hashmark -- `P#Backend#Database` 是什么意思?
- sql - 在 hive 中排序表值的问题
- symfony - Symfony WebProfiler 不显示
- python - from selenium.webdriver.common.keys import Keys 有什么用