我是一名正在學習的前端編碼人員，最初是一名數據分析師，試圖將ApexChart可視化應用到flexbox元素中。2560x1440像素，看起來還不錯。然而，當我進一步調整它的大小時，高度變得太小，無法閱讀，盡管寬度仍然很好。我想我在HTML或者樣式上犯了一個簡單的錯誤，但是我找不到它。我附上我的App.js和App.css文件供你參考:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<script defer src="https://d3js.org/d3.v6.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
</head>
<body>
<div>
<header id="header">
<h1>innovation platform portal</h1>
</header>
<div class="container">
<div id="flex1">
<div class="block block1">
<div class="block-inner">
<p class="text-primary">TOTAL ASSETS</p>
<span class="material-icons-outlined text-sf">inventory_2</span>
</div>
<span class="text-primary font-weight-bold">
<div id="number_of_assets">
6
</div>
</span>
</div>
<div class="block block2">
<div class="block-inner">
<p class="text-primary">DATA CONNECTIONS</p>
<span class="material-icons-outlined text-sf">handshake</span>
</div>
<span class="text-primary font-weight-bold">
<div id="number_of_connections" class="text-primary font-weight-bold">
12
</div>
</span>
</div>
<div class="block block3">
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
width="100%"
height="100%"
/>
</div>
</div>
<div class="block block3">
<Chart
options={this.state.options}
series={this.state.series}
type="bar"
width="100%"
height="100%"
/>
</div>
</div>
</div>
</body>
</html>下面是我的App.css:
html,body
{
width:100vw;
height:100vh;
margin:0px;
padding:0px;
overflow-x: hidden;
}
* {
margin:0;
padding:0;
font-family:"Montserrat", sans-serif;
text-decoration:none;
box-sizing:border-box;
}
.text-sf {
color:#e22925;
}
.text-primary {
color:#666666;
}
.font-weight-bold {
font-weight:600;
}
#header {
display:flex;
width:100%;
top:0;
left:0;
height:7vh;
background-color:#e22925;
color:#ffffff;
align-items:center;
justify-content:center;
font-size:2vh;
font-family:"Montserrat",sans-serif;
text-transform:capitalize;
}
/*image in the header*/
img {
position:absolute;
display:flex;
left:2.5vw;
padding:35px 0;
max-width:10%;
}
/*sets up the flex container directly below the header*/
.container {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:30vh;
border-bottom:solid 1px;
border-color:#d2d2d3;
}
/*controls settings of all the boxes in the flex*/
.block {
min-height:100%;
border:1px solid #d2d2d3;
margin:.125vw;
}
/*this is the size of text below "total assets"*/
.block > span {
font-size:5vh;
font-weight:600;
margin-left:20%;
padding:2px;
}
/*seperate "total assets" from the box icon*/
.block-inner {
display:flex;
justify-content: space-around;
}
/*size of the header in two left boxes*/
.block-inner > p {
font-size: 2.5vh;
}
/*size of the images in the first 2 boxes*/
.block-inner > span {
font-size: 3vw;
}
/*total assets*/
.block1 {
height:90%;
flex:0 0 calc(20%);
display:flex;
flex-direction:column;
justify-content:space-around;
background-color:#ffffff;
box-sizing:border-box;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*data connections*/
.block2 {
height:90%;
flex:0 0 calc(20vw);
display:flex;
flex-direction:column;
justify-content:space-around;
background-color:#ffffff;
box-sizing:border-box;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*assets shared by account*/
.block3 {
width:29%;
height:100%;
flex:0 0 calc(29%);
background-color:#ffffff;
display:flex;
flex-direction:column;
padding:1px;
box-sizing:border-box;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*top consumed assets*/
.block4 {
width:29%;
height:100%;
flex:0 0 calc(29%);
display:flex;
flex-direction:column;
background-color:#ffffff;
padding: 1px;
-webkit-column-break-inside:avoid;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*sets the options of the flex element containing the boxes*/
#flex1 {
display:flex;
height:95%;
width:100%;
justify-content:center;
align-items:center;
}
@media screen and (min-width: 992px) {
.container,.flex1 {
flex-direction:column;
flex-wrap:wrap;
flex:10%;
display:flex;
}
}
@media screen and (min-height: 600px) {
.container, .flex1 {
flex-direction:row;
flex-wrap:wrap;
flex:10%;
display:flex;
}
}你能幫我確定是什么導致了我的問題嗎？另外，你能幫我弄清楚如何在App.js中添加多個視覺效果嗎？我試過用:
function App {
class Bar extends App {
constructor(props) {但是屏幕顯示的只是一片空白
這是我的App.css html，正文 { 寬度:100vw 身高:100vh 邊距:0px 填充:0px 溢出-x:隱藏； }
* {
margin:0;
padding:0;
font-family:"Montserrat", sans-serif;
text-decoration:none;
box-sizing:border-box;
}
.text-sf {
color:#e22925;
}
.text-primary {
color:#666666;
}
.font-weight-bold {
font-weight:600;
}
#header {
display:flex;
width:100%;
top:0;
left:0;
height:7vh;
background-color:#e22925;
color:#ffffff;
align-items:center;
justify-content:center;
font-size:2vh;
font-family:"Montserrat",sans-serif;
text-transform:capitalize;
}
/*image in the header*/
img {
position:absolute;
display:flex;
left:2.5vw;
padding:35px 0;
max-width:10%;
}
/*sets up the flex container directly below the header*/
.container {
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
height:30vh;
border-bottom:solid 1px;
border-color:#d2d2d3;
}
/*controls settings of all the boxes in the flex*/
.block {
min-height:100%;
border:1px solid #d2d2d3;
margin:.125vw;
}
/*this is the size of text below "total assets"*/
.block > span {
font-size:5vh;
font-weight:600;
margin-left:20%;
padding:2px;
}
/*seperate "total assets" from the box icon*/
.block-inner {
display:flex;
justify-content: space-around;
}
/*size of the header in two left boxes*/
.block-inner > p {
font-size: 2.5vh;
}
/*size of the images in the first 2 boxes*/
.block-inner > span {
font-size: 3vw;
}
/*total assets*/
.block1 {
height:90%;
flex:0 0 calc(20%);
display:flex;
flex-direction:column;
justify-content:space-around;
background-color:#ffffff;
box-sizing:border-box;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*data connections*/
.block2 {
height:90%;
flex:0 0 calc(20vw);
display:flex;
flex-direction:column;
justify-content:space-around;
background-color:#ffffff;
box-sizing:border-box;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*assets shared by account*/
.block3 {
width:29%;
height:100%;
flex:0 0 calc(29%);
background-color:#ffffff;
display:flex;
flex-direction:column;
padding:1px;
box-sizing:border-box;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*top consumed assets*/
.block4 {
width:29%;
height:100%;
flex:0 0 calc(29%);
display:flex;
flex-direction:column;
background-color:#ffffff;
padding: 1px;
-webkit-column-break-inside:avoid;
border:1px solid #d2d2d3;
border-radius:5px;
}
/*sets the options of the flex element containing the boxes*/
#flex1 {
display:flex;
height:95%;
width:100%;
justify-content:center;
align-items:center;
}
@media screen and (min-width: 992px) {
.container,.flex1 {
flex-direction:column;
flex-wrap:wrap;
flex:10%;
display:flex;
}
}
@media screen and (min-height: 600px) {
.container, .flex1 {
flex-direction:row;
flex-wrap:wrap;
flex:10%;
display:flex;
}
}