flex布局一行四列,平分
时间: 2023-08-13 16:09:58 浏览: 228
flex布局.html
要实现一行四列的平分布局,可以使用 Flexbox(弹性盒子布局)来实现。以下是一个基本的示例:
HTML 代码:
```html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS 代码:
```css
.container {
display: flex;
}
.box {
flex: 1;
}
```
在上面的代码中,我们创建了一个容器 `.container`,并将其设置为 `display: flex;`,这样它的子元素就会按照 Flexbox 的规则进行布局。
接着,我们创建了四个盒子 `.box`,并将它们的 `flex` 属性设置为 `1`。这表示它们会均分容器的可用空间,从而实现平分布局。
通过以上代码,你就可以在一行中实现四列的平分布局。你可以根据需要调整容器和盒子的样式,以适应你的布局需求。
阅读全文