Comboine CSS Grid＆Flexbox

Question

需要您的帮助来解决此问题：)我开始研究HTML / Css，并且必须结合使用网格和flexbox以获得相同的布局（附有图片）。你能告诉我我该怎么办！？当我在文件中添加CSS Flexbox时，我会松动CSS网格设置谢谢。enter image description here

我尝试添加代码失败，因此，这是页面的链接http://diakiunivstra.alwaysdata.net/Homework-project/webdev-project.html

Answer 1

我需要更具体地说明哪些部分需要调整。将实时网站与图像进行比较，有一些。对于不同的部分，我将使用不同的CSS策略来解决它们。

首先：一个元素只能包含一个显示attritube。在这种情况下，元素显示为网格或弹性。

作为第二点，作为个人实践，我不喜欢在整个页面上应用网格或伸缩。由于display: grid或display: flex可能更适合页面的每个部分。从这个意义上讲，我宁愿保持自己的灵活性。

所以，我试图对您已经做的事情没有太大的改变。最初，我删除了容器的显示设置，并在div中包装了html的某些部分，因此可以决定是否应用grid或flexbox。我将其分为三部分：页眉（我使用网格），主文件（也包含网格）和页脚（flex！）

一旦您了解了网格和弹性如何工作，它们就会变得非常容易。对于网格，您具有一个层次结构：一个包装器，具有大多数网格配置及其下的子元素。通常，更多div

<header>
    <!-- this is where I set the grid -->
    <div class="header-wrapper"> 
        <!-- first of two sons/elements below div -->
        <div>
            <h1 class="text">End-of-study-internship</h1>
            <h2 class="text">Subject of the internship</h2>
        </div>
        <!-- end of first son -->
        <!-- second of two sons/elements below div -->
        <div>
            <img class="image" src="http://diakiunivstra.alwaysdata.net/images/logo-univstra.png"
                alt="logo-univstra" width="400" height="175">
        </div>
        <!-- end of second son -->
    </div>
    <!-- header grid ends -->
</header>

css应用于您已经完成的工作：

    .header-wrapper {
        display: grid;
        grid-template-columns: 3fr 1fr;
        text-align: center;
    }

    .header-wrapper .text {
        display: block;
    }

为了您的导航，我只添加了padding: 20px 0;我在主要内容上使用了相同的策略。（我将在最后复制整个代码）

对于页脚，似乎display: flex更合适，因为您不必'固定'内容，它们可以散布在整个空间中。

<footer>
    <div class="footer-wrapper">
        <p>
            <a href="http://www.unistra.fr/index.php?id=accueil&utm_source=unistra_fr&utm_medium=unistra_fr_homepage"
                target="_blank" style="text-decoration: none; color: cornsilk;">Université de Strasbourg</a>
        </p>
        <p>Full name</p>
        <p>Graduation</p>

    </div>
</footer>

其css（在您已经拥有的顶部添加：）：

    footer{
        display: block;
    }
    .footer-wrapper {
        display: flex;
        justify-content: space-around;
    }

    .footer-wrapper p,
    .footer-wrapper a {
        display: inline;
    }

由于我在您的代码之上添加了一些代码，一旦将所有内容放在一起，我将检查哪些内容被取消。除了取消容器上的显示设置外，我所有的CSS附加功能都位于样式标签的底部。我还在div周围包裹了一些html元素

<style>
    .container {
        font-family: 'Times New Roman', Times, serif;
        font-size: 13pt;
        border: 1px solid #df4585;
        text-align: justify;
        width: 1000px;
        margin: auto;
    }

    section {
        width: auto;
        height: auto;
        max-width: 500px;
        display: grid;
        grid-row: 3/4;
        grid-column: 1;
    }

    aside {
        min-width: 160px;
        max-width: 200px;
        display: grid;
        grid-row: 3/4;
        grid-column: 2/3;
    }

    header {
        max-height: 160px;
        border-bottom: 1px solid #df4585;
        padding: 20px;
        display: flex;
        align-items: center;
        display: grid;
        grid-row: 1/2;
        grid-column: 1/ span 2;
    }

    .text {
        display: grid;
        grid-row: 1/2;
        grid-column: 1/2;
        display: flex;
        flex-grow: 1;
        align-items: center;
    }

    .image {
        display: flex;
        justify-content: flex-end;
        display: grid;
        grid-row: 1/2;
        grid-column: 2/3;
    }

    nav {
        font-size: 16pt;
        max-height: 50px;
        display: grid;
        grid-row: 2/3;
        grid-column: 1/ span 2;
        border-bottom: 1px solid #df4585;
    }

    nav ul {
        display: flex;
        justify-content: space-evenly;
    }

    nav li {
        display: flex;
        flex-grow: 0;
        width: 170px;
        border: 1px solid black;
        border-radius: 20px;
        background-color: rgb(31, 31, 141);
        color: cornsilk;
        align-items: center;
        justify-content: space-evenly;
    }

    footer {
        font-style: italic;
        background-color: rgb(31, 31, 141);
        color: cornsilk;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: grid;
        grid-row: 4/5;
        grid-column: 1/3;
        border-top: 1px solid #df4585;
    }

    table {
        table-layout: auto;
        border-collapse: collapse;
        text-align: center;
        width: 500px;
    }

    th,
    td {
        border: 1px solid rgb(155, 9, 106);
    }

    .header-wrapper {
        display: grid;
        grid-template-columns: 3fr 1fr;
        text-align: center;
    }

    .header-wrapper .text {
        display: block;
    }

    nav {
        padding: 20px 0;
    }

    nav ul {
        margin: 0;
    }

    .main-grid {
        display: grid;
        grid-template-columns: 3fr 1fr;
    }

    section {
        max-width: 100%;

    }

    .main-grid div {
        border: 1px blue solid;
        padding: 10px
    }

    footer {
        display: block;
    }

    .footer-wrapper {
        display: flex;
        justify-content: space-around;
    }

    .footer-wrapper p,
    .footer-wrapper a {
        display: inline;
    }
</style>

您的html：

<body class="container">
    <header>
        <!-- this is where I set the grid -->
        <div class="header-wrapper">
            <!-- first of two sons/elements below div -->
            <div>
                <h1 class="text">End-of-study-internship</h1>
                <h2 class="text">Subject of the internship</h2>
            </div>
            <!-- end of first son -->
            <!-- second of two sons/elements below div -->
            <div>
                <img class="image" src="http://diakiunivstra.alwaysdata.net/images/logo-univstra.png"
                    alt="logo-univstra" width="400" height="175">
            </div>
            <!-- end of second son -->
        </div>
        <!-- header grid ends -->
    </header>
    <nav>
        <ul>
            <li>Compagny</li>
            <li>Projects</li>
            <li>Productions</li>
            <li>Conclusion</li>
        </ul>
    </nav>
    <div class="main-grid">
        <div>
            <section>
                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus sint consectetur nostrum, labore
                    veritatis, nisi quos id quasi,
                    saepe molestias quaerat? Rem aperiam eaque tempore.<br>
                    Illum praesentium pariatur repudiandae hic.Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                    Possimus sint consectetur nostrum,
                    labore veritatis, nisi quos id quasi, saepe molestias quaerat? Rem aperiam eaque tempore.
                    Illum praesentium pariatur repudiandae hic.
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, dicta, quo excepturi ullam nisi
                    tempore
                    nobis sapiente, deserunt quis similique non libero commodi a?
                    A ullam minus velit quia pariatur.
                </p>
                <table>
                    <caption style="font-weight: bold; font-style: italic ; font-size: 14pt;">Performance and quality
                        analysis
                        report</caption>
                    <thead>
                        <tr style="font-weight: bold;">
                            <th>Performance</th>
                            <th>Value</th>
                            <th>Performance</th>
                            <th>Value</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Problems</td>
                            <td>13</td>
                            <td>Improvement</td>
                            <td>13</td>
                        </tr>
                        <tr>
                            <td>Success</td>
                            <td>66</td>
                            <td>First Octet</td>
                            <td>1.16sec</td>
                        </tr>
                        <tr>
                            <td>Start of Display</td>
                            <td>3.83sec</td>
                            <td>End of Upload</td>
                            <td>8.68sec</td>
                        </tr>
                        <tr>
                            <td>Speed Index</td>
                            <td>8656msec</td>
                            <td>Total Weight</td>
                            <td>2Mb</td>
                        </tr>
                    </tbody>
                </table>
                <p style="text-align: left;">Src. https://dareboost.com</p>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, necessitatibus veritatis?
                    Similique aspernatur suscipit ipsam laboriosam incidunt adipisci assumenda sint, ex, corporis dolore
                    totam
                    vero magnam a magni quidem quo?
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Obcaecati enim omnis sed alias quo odit
                    consequuntur debitis atque explicabo impedit?
                    Ipsum deserunt amet dolorem ipsam illum magnam minus harum vitae.
                </p>

            </section>
        </div>

        <div>
            <aside>
                <h3>Events</h3>
                <p>
                    KiwiParty: The one-day web conference dedicated to web quality, design, performance and
                    accessibility.
                </p>
                &#128198; March 2020
            </aside>

        </div>
    </div>



    <footer>
        <div class="footer-wrapper">
            <p>
                <a href="http://www.unistra.fr/index.php?id=accueil&utm_source=unistra_fr&utm_medium=unistra_fr_homepage"
                    target="_blank" style="text-decoration: none; color: cornsilk;">Université de Strasbourg</a>
            </p>
            <p>Full name</p>
            <p>Graduation</p>

        </div>
    </footer>
</body>