通过flex 让div从左往右排 一行排四个, 并且有间距,间距相同, 如果最后一行不够的话,也要从左往右排,假如最后一行一个,就留三个位置,两个就留两个位置
时间: 2024-04-07 07:33:25 浏览: 76
要实现将div从左往右排列,一行排列四个,并且有相同的间距,即使最后一行不够四个也要从左往右排列,您可以使用Flexbox的属性来实现。请按照以下步骤进行操作:
1. 在父容器上设置display属性为flex,并且设置flex-wrap属性为wrap,这样可以让div自动换行。
```css
.container {
display: flex;
flex-wrap: wrap;
}
```
2. 在每个div上设置flex-basis属性为25%,这样每个div将占据一行的四分之一。
```css
.container div {
flex-basis: 25%;
}
```
3. 使用margin属性来添加间距。您可以设置一个固定的值,也可以使用百分比来实现相同的间距。
```css
.container div {
margin-right: 10px; /* 设置固定的间距值 */
/* 或者 */
margin-right: 2%; /* 使用百分比来实现相同的间距 */
}
```
4. 使用justify-content属性设置对齐方式为flex-start,这样每行的div都会从左边开始排列。
```css
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
```
这样,您的div将从左往右排列,一行排列四个,并且它们之间有相同的间距。即使最后一行不够四个,也会从左往右排列。
希望这对您有所帮助!如果还有其他问题,请随时提问。
阅读全文
相关推荐

















