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>