本文围绕flex可视化大屏布局修饰美化展开，讲述了大屏布局美化及flex布局主侧轴相关内容。包括解决滚动条出现的原因，设置小盒子间隔，调整盒子主侧（xy）轴对齐方式，以及设置背景等方面，并给出了相应的解决方法和效果展示。
-----关于flex可视化大屏布局修饰美化，主侧轴（xy轴）的排列方式
上篇文章讲述了关于整个大屏的简易搭建，接下来讲述的是大屏的布局美化、flex布局主侧轴的
如果不了解flex，建议去小篇破站学习一下
———————————————————————————————————————————
上期代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可视化大屏</title>
<style>
header {
height: 10vh;
width: 100vw;
background-color: #bd3232;
font-family: "楷体";
color: rgb(51, 190, 190);
text-align: center;
line-height: 10vh;
font-size: 5vh;
}
.box {
height: 90vh;
width: 100vw;
background-color: #5f1db5;
/* 弹性布局 */
display: flex;
/*弹性布局，默认主轴方向为x轴方向*/
}
.left {
flex: 1;
/*flex继承主轴方向上的大小比例*/
height: 90vh;
/*或者100%，继承父级高度*/
/* 宽可以 */
background-color: #56f248;
display: flex;
flex
最低0.47元/天 解锁文章
扫一扫
1552
到【灌水乐园】发言
