大盒子中垂直居中flex绝对定位后,想让盒子之间有自适应的间距该怎么做
时间: 2024-02-01 10:14:42 浏览: 62
CSS3弹性盒模型开发笔记(三)
可以使用 `margin` 属性来设置盒子之间的间距,同时通过 `flex-grow` 属性来实现自适应。
具体做法如下:
1. 设置父盒子的 `display` 属性为 `flex`,并且设置 `justify-content` 和 `align-items` 属性为 `center`,实现垂直居中:
```css
.parent {
display: flex;
justify-content: center;
align-items: center;
}
```
2. 设置子盒子的 `position` 属性为 `absolute`,并且设置 `flex-grow` 属性为 `1`,让子盒子自适应宽度:
```css
.child {
position: absolute;
flex-grow: 1;
}
```
3. 设置子盒子之间的间距,可以使用 `margin` 属性来实现:
```css
.child + .child {
margin-left: 10px; /* 设置间距 */
}
```
完整的代码如下:
```html
<div class="parent">
<div class="child">子盒子1</div>
<div class="child">子盒子2</div>
<div class="child">子盒子3</div>
</div>
```
```css
.parent {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.child {
position: absolute;
flex-grow: 1;
}
.child + .child {
margin-left: 10px;
}
```
这样做就可以实现垂直居中,子盒子自适应宽度,并且有自适应的间距了。
阅读全文