可视化 | 可视化大屏快速布局思路（flex应用）

最新推荐文章于 2024-05-17 14:32:46 发布

啦啦右一

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量2.1k

点赞数 56

分类专栏： # 数据可视化技术大数据与数据分析右一的开发日记合集文章标签：前端

本文链接：https://blog.csdn.net/m0_63398413/article/details/135760644

版权

右一的开发日记合集同时被 3 个专栏收录

73 篇文章 0 订阅

订阅专栏

大数据与数据分析

68 篇文章 15 订阅

订阅专栏

数据可视化技术

21 篇文章 0 订阅

订阅专栏

文章目录

📚flex布局
📚快速布局思路
📚grid布局补充

📚flex布局

博客补充：前端 | （十三）伸缩盒模型

🐇父容器的属性

display: flex;：将容器设置为Flex布局。
flex-direction: row/column;：设置主轴的方向（水平或垂直）。
flex-wrap: nowrap/wrap/wrap-reverse;：控制子元素是否换行。
justify-content: flex-start/flex-end/center/space-between/space-around;：控制子元素在主轴上的对齐方式。
align-items: flex-start/flex-end/center/baseline/stretch;：控制子元素在交叉轴上的对齐方式。
align-content: flex-start/flex-end/center/space-between/space-around/stretch;：控制多行子元素在交叉轴上的对齐方式。

🐇子元素的属性

order: 定义子元素的排列顺序。
flex-grow: 定义子元素的放大比例。
flex-shrink: 定义子元素的缩小比例。
flex-basis: 定义子元素在主轴上的初始大小。
flex: 等同于flex-grow, flex-shrink, flex-basis的缩写。
align-self: 可以覆盖父容器的align-items属性，控制单个子元素的对齐方式。

🐇弹性盒模型

主轴（Main Axis）和交叉轴（Cross Axis）：Flex布局中存在一个主轴和一个交叉轴，主轴按照flex-direction的方向，交叉轴与之垂直。
伸缩容器（Flex Container）和伸缩项目（Flex Item）：父容器为伸缩容器，子元素为伸缩项目。
主轴尺寸（Main Size）和交叉轴尺寸（Cross Size）：伸缩项目在主轴方向上的尺寸为主轴尺寸，交叉轴方向上的尺寸为交叉轴尺寸。

🐇Flex布局的优势

简化布局：使用Flex布局可以更简单和高效地实现复杂的布局需求。
自适应性：Flex布局可以根据容器的大小自动调整子元素的大小和位置。
响应式设计：Flex布局适用于响应式设计，能够在不同分辨率和设备上提供一致的布局效果。
网格布局：Flex布局可以实现网格布局，即将父容器划分为多个可调整大小的网格。

📚快速布局思路

html框架如下，各个div取好名字，方便样式对应和js定位。

<body>
    <div id="left">
        <div id="left_up"></div>
        <div id="left_down"></div>
    </div>
    <div id="center"></div>
    <div id="right">
        <div id="right_up"></div>
        <div id="right_down"></div>
    </div> 
</body>

首先设置一下主元素body

给个背景（后续div给颜色都是方便演示）。
margin和padding设为0，因为有默认样式。
以视口高度作为body高度。
flex相关父元素设置

body{
  background: url(./assects/images/background.jpg) center;
  margin: 0px;
  padding: 0px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

然后就是各个部分“分天下”，如下所示，各自的宽高百分比对应父元素宽高。

#left{
width: 25%;
    height: 100%;
    background-color: brown;
    margin-right: 2%;
}
#left_up{
    width: 100%;
    height: 40%;
    background-color: aqua;
}
#left_down{
    width: 100%;
    height: 60%;
    background-color: bisque;
}
#center {
    width: 46%;
    height: 100%;
    background-color: rgb(255, 205, 251);
}
#right{
    width: 25%;
    height: 100%;
    margin-left: 2%;
    background-color: blue;
}
#right_up{
    width: 100%;
    height: 50%;
    background-color: rgb(0, 255, 106);
}
#right_down{
    width: 100%;
    height: 50%;
    background-color: rgb(255, 195, 195);
}

像这样

最后加上script链接上对应的js图表绘制。再根据显示效果，调整图表相关字体，调整宽高等等。
在调整过程中，适当应用width: 125%;这种超出设置，可以让图表显示更合理（因为实际div会部分覆盖，但是覆盖的是另外图表的空白区域所以没关系）。
在调整top、bottom这类时，还可以用到负值。
具体的实操后就有体会惹👀，调整的最终目的就是让图表漂亮地待在合适的位置，像这样：

📚grid布局补充

除了flex布局，grid网格布局也很香⭐️，核心思路也是分块+填充调整。
补充博客：一文读懂grid布局

快速上手
1. 创建一个Grid容器：首先，在HTML文件中选择一个容器元素，可以是任何具有子元素的元素，比如div。在该容器元素上应用display: grid;样式，将其设置为Grid布局容器。
2. 定义Grid列和行：使用grid-template-columns属性来定义列的宽度，可以使用像素、百分比等单位，也可以使用fr表示等分比例。例如，grid-template-columns: 1fr 2fr 1fr;将容器分为三列，其中第二列的宽度是第一列和第三列的两倍。使用grid-template-rows属性来定义行的高度，用法与grid-template-columns类似。
3. 放置子元素：在Grid容器中的子元素将自动以网格的形式进行布局。可以使用grid-column和grid-row属性来控制子元素的位置。例如，grid-column: 1 / 3;将元素放置在第一列到第三列之间的区域。也可以使用grid-area属性来同时定义grid-row和grid-column，例如，grid-area: 2 / 1 / 3 / 3;将元素放置在第二行第一列到第三列之间的区域。
4. 控制空白间隔：可以使用grid-gap属性来设置网格之间的间隔，可以是像素、百分比等单位。例如，grid-gap: 10px;将网格之间的间隔设置为10像素。
5. 其他属性：可用于进一步控制Grid布局，如justify-items用于控制子元素在列中的对齐方式，align-items用于控制子元素在行中的对齐方式等。

HTML：

<div class="grid-container">
  <div class="item header">Header</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item content">Content</div>
  <div class="item footer">Footer</div>
</div>

CSS：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 列宽比例为 1:2:1 */
  grid-template-rows: auto 100px 1fr; /* 行高分为自适应、100px、剩余部分 */
  grid-gap: 10px;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer"; /* 定义布局区域 */
  height: 400px; /* 限制容器高度 */
}

.item {
  background-color: #ccc;
  padding: 20px;
}

.header { grid-area: header; background-color: lightblue; }
.sidebar { grid-area: sidebar; background-color: lightgreen; }
.content { grid-area: content; background-color: lightyellow; }
.footer { grid-area: footer; background-color: lightsalmon; }