html - 尝试将带有网格的 html 容器重写为 flexbox

Question

所以我有一个用网格制作的容器，但是将它导出为 PDF 不支持它，所以我必须将它重写为 Flexbox。 (页面的其余部分是用 flex 编写的，并且工作得很好)。

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

第 1 列:元素元素元素

第 2 列:Item item item

第 3 列:更大的矩形，其中包含图表 Canvas 。(参见添加的屏幕截图) https://i.imgur.com/SBFoG4j.png

section、grid、story 等主要是为了将它们全部放在一个容器中并在页面中居中，效果非常好。 (现有代码)，但是带有分数的“容器”类部分和分数框是它在 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>