试图用网格将html容器重写为flexbox

Question

所以我有一个用网格制作的容器，但将其导出为PDF不支持它，所以我不得不将其重写为Flexbox。(该页的其余部分使用flex编写，效果非常好(。

基本上，我需要一个3列的布局，其中左边的2列基本上是两列中的一个列表：

第1列：项目项目项目

第2列：项目项目

第3列：更大的矩形，里面有一个图表画布。(请参阅添加的屏幕截图(https://i.stack.imgur.com/pZQv8.png

小节、网格、故事等主要用于将所有内容放在一个容器中，并将其集中在页面中，这非常有效。(现有代码(，但"容器"类中包含分数和分数框的部分是它在css网格中的位置，以及欺骗的位置。

The code as of now:
<section class="story story--spaceous">
<div class="hero__compact-inner">
<div class="grid">
<div class="grid__row">
<div class="grid__col">
<h2 class="hero__subtitle">
<span id="header-title"></span>
</h2>
<p class="story__intro">
<span id="header-customerName"></span>
</p>
<p class="story__intro">
<span id="header-description"></span>
</p>
<div class="container">
<div class="score1">
Laag 1: Bewustzijn <div id="header-awarenessProgression"></div>
</div>
<div class="score2">
Laag 2: Beleid <div id="header-policyProgression"></div>
</div>
<div class="score3">
Laag 3: Monitoring <div id="header-monitoringProgression"></div>
</div>
<div class="score4">
Laag 4: Data Security <div id="header-dataSecurityProgression"></div>
</div>
<div class="score5">
Laag 5: Applicatie <div id="header-applicationProgression"></div>
</div>
<div class="score6">
Laag 6: EndPoint Security <div id="header-endPointSecurityProgression"></div>
</div>
<div class="score7">
Laag 7: Netwerk/Systeem <div id="header-networkSystemProgression"></div>
</div>
<div class="score8">
Laag 8: Fysiek <div id="header-physicalProgression"></div>
</div>
<div class="score-box">
<div class="chart--donut"><canvas id="header-totalScore"></canvas></div>
</div>
<div id="header-lastPublished"></div>
</div>
</div>
</div>
</div>
</div>
</section>
And CSS:
.container {
width: 1000px;
margin: 30px auto;
display: grid;
grid-template-rows: repeat(4, 40px);
grid-template-columns: repeat(3, 1fr);
height: 260px;
}
.score1 {
grid-row: 1/2;
grid-column: 1/2;
}
.score2 {
grid-row: 1/2;
grid-column: 2/3;
}
.score3 {
grid-row: 2/3;
grid-column: 1/2;
}
.score4 {
grid-row: 2/3;
grid-column: 2/3;
}
.score5 {
grid-row: 3/4;
grid-column: 1/2;
}
.score6 {
grid-row: 3/4;
grid-column: 2/3;
}
.score7 {
grid-row: 4/5;
grid-column: 1/2;
}
.score8 {
grid-row: 4/5;
grid-column: 2/3;
}
.score-box {
grid-row: 1/-1;
grid-column: 3/4;
background-color: #e3e33e;
height: 300px;
width: 300px;
}

所以我需要这个想法出现在Flexbox中。知道什么是最快的胜利吗？

Answer 1

作为一个经历过html到pdf转换的奋斗者，请确保flexbox能够与您首先使用的任何方法一起工作。几个月前，当我不得不为工作做同样的事情时，我最终从网格开始，切换到flexbox，最后用纯html表重做了整个工作。

不过，为了回答您关于flexbox的问题，我只是将您所有的分数单独放在一个容器中，并为此定义了宽度，同时将包含元素和分数列表都定义为display: flex。这是代码：

<section class="story story--spaceous">
<div class="hero__compact-inner">
<div class="grid">
<div class="grid__row">
<div class="grid__col">
<h2 class="hero__subtitle">
<span id="header-title"></span>
</h2>
<p class="story__intro">
<span id="header-customerName"></span>
</p>
<p class="story__intro">
<span id="header-description"></span>
</p>
<div class="container">
<div class="score-list">
<div class="score">
Laag 1: Bewustzijn <div id="header-awarenessProgression"></div>
</div>
<div class="score">
Laag 2: Beleid <div id="header-policyProgression"></div>
</div>
<div class="score">
Laag 3: Monitoring <div id="header-monitoringProgression"></div>
</div>
<div class="score">
Laag 4: Data Security <div id="header-dataSecurityProgression"></div>
</div>
<div class="score">
Laag 5: Applicatie <div id="header-applicationProgression"></div>
</div>
<div class="score">
Laag 6: EndPoint Security <div id="header-endPointSecurityProgression"></div>
</div>
<div class="score">
Laag 7: Netwerk/Systeem <div id="header-networkSystemProgression"></div>
</div>
<div class="score">
Laag 8: Fysiek <div id="header-physicalProgression"></div>
</div>
</div>
<div class="score-box">
<div class="chart--donut"><canvas id="header-totalScore"></canvas></div>
</div>
<div id="header-lastPublished"></div>
</div>
</div>
</div>
</div>
</div>
</section>

<style>
.container {
width: 1000px;
margin: 30px auto;
height: 260px;
display: flex;
}
.score-list {
display: flex;
flex-wrap: wrap;
width: 75%;
}
.score {
width: 50%;
}
.score-box {
background-color: #e3e33e;
height: 300px;
width: 300px;
}
</style>