通过flex 让div从左往右排 一行排四个, 并且有间距,间距相同,
时间: 2024-04-07 07:33:24 浏览: 70
两个div如何并排一行具体该怎么实现
5星 · 资源好评率100%
要实现将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%; /* 使用百分比来实现相同的间距 */
}
```
请注意,最后一行的div可能不会填满整行。如果希望最后一行的div也能填满整行,您可以使用flex-grow属性来自动调整它们的宽度。
```css
.container div {
flex-grow: 1;
}
```
这样,您的div将从左往右排列,一行排列四个,并且它们之间有相同的间距。
希望这对您有所帮助!如果还有其他问题,请随时提问。
阅读全文