No.4可视化大屏--vite+vue3 Flex布局和grid布局

一、Flex 弹性盒子布局（一维布局）

<script setup></script><template>
<div><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
</div>
</template><style scoped>
.container {width: 100%;height: 100%;display: flex;
}</style>

　　container为容器，里面的item 就是项目

1.容器的属性

 2.项目的属性

 

例子：

<script setup>
</script><template>
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
</div>
</template><style scoped>
.container {display: flex;width: 100%;height: 100%;background-color: rgb(13, 4, 139);flex-wrap: wrap;}
.item {border: 1px solid white;width: 33%;
}
</style>

　　

 

 

二、grid布局（网格布局、二维布局）

Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯--种 css 二维布局。在兼容性方面，截至目前，几乎所有的浏览器都对 css Grid 提供了原生的支持。
Grid布局优点:这是一个二维布局系统，最大优点就是可以同时处理列和行。

2.1 容器和项目

Grid和flex类似，布局的属性都是分为两类，一类定义在容器上，称为容器属性，一类定义在项目上称为项目属性
采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目"

<script setup>
</script><template>
<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div>
</div>
</template><style scoped>
.container {display: grid;width: 100%;height: 100%;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);
}
.item {border: 1px solid white;
}</style>

 2.2 grid 布局跨行跨列

1）跨列

 网格线概念：

 

<script setup>
</script><template>
<div class="container"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div><div class="item item4">4</div>
</div>
</template><style scoped>
.container {display: grid;width: 100%;height: 100%;grid-template-columns: repeat(2,300px);grid-template-rows: repeat(2,300px);
}
.item {border: 1px solid white;
}
.item1 {grid-column: 1 / 3;  /*网格线的编号1和编号3 */
}
.item4 {grid-row: 1 / 3;grid-column: 3 / 4;
}
</style>

 

2.3 

 

<script setup>
</script><template>
<div class="container"><div class="item item1">1</div><div class="item item2">2</div><div class="item item3">3</div><div class="item item4">4</div><div class="item item5">5</div><div class="item item6">6</div><div class="item item7">7</div><div class="item item8">8</div>
</div>
</template><style scoped>
.container {display: grid;width: 100%;height: 100%;grid-template-columns: 1fr 2fr 1fr ;grid-template-rows: repeat(3,1fr);gap: 5px;
}
.item {border: 1px solid white;
}
.item2 {grid-column: 2/3;grid-row: 1/3;
}
</style>