nvue的CSS布局怎么布局,解释举例
时间: 2024-05-02 18:19:35 浏览: 57
CSS布局实例
nvue 的 CSS 布局可以使用 flex 或 grid 布局,具体可以根据需要选择。下面是一个使用 flex 布局的例子:
```
<template>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</template>
<style scoped>
.container {
display: flex;
justify-content: space-between;
}
.item {
width: 30%;
height: 100px;
background-color: #ccc;
}
</style>
```
在这个例子中,`.container` 使用 `display: flex`,并通过 `justify-content: space-between` 实现了子元素之间等间距的布局。`.item` 是子元素,它们的宽度为 30%,高度为 100px,背景色为灰色。
阅读全文