為什么我的 flexbox 沒有占據它所包含的容器的整個高度？

Question

我正在做一門關於前端大師的課程。 這是入門課程的第一個項目。 我根據以下內容制作了網站： https : //btholt.github.io/intro-to-web-dev-v2/news.html

這是我的 HTML 代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="P1.css">
    <link href="https://fonts.googleapis.com/css2?family=Aladin&display=swap" rel="stylesheet">
    <title>The News Times</title>
    <link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
</head>
<body>
    <div>
        <h1 class="heading">The News Times</h1>
    </div>
    <div class="flex">
        <div class="blk s25">
            <h3 class="title">Student Learns HTML</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
        </div>
        <div class="blk s50">
            <h3 class="title">BREAKING: Puppies are adorable</h3>
            <img src="http://placecorgi.com/600/300" alt="Corgie" style="width: 96%;">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
        </div>
        <div class="blk s25">
            <h3 class="title">CSS is Apparently a Thing</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>    
        </div>
    </div>
    <div class="flex">
        <div class="blk s25 cust">
            <h3 class="title">Boy likes Turtle</h3>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro, reprehenderit! 
                Et tempora eum consequuntur dolores quasi iusto deserunt illo aperiam eaque consectetur sequi qui amet sint, 
                dolore nesciunt repellat ipsum?
            </p>
            <p>Voluptate, ut, cupiditate ducimus vitae blanditiis ex impedit debitis est tempora dolores nam sed. Esse nobis 
               ea inventore qui enim quia beatae ab commodi laboriosam quam aliquam aut perspiciatis fuga nam rerum temporibus 
               voluptatum explicabo voluptate, pariatur ullam laudantium eligendi.
            </p> 
        </div>
        <div class="blk s75">
            <div class="inner-flex">
                <div class="element politics">
                    <h1><a href="#">Politics</a></h1>
                </div>
                <div class="element technology">
                    <h1><a href="#">Technology</a></h1>
                </div>
                <div class="element local">
                    <h1><a href="#">Local</a></h1>
                </div>
                <div class="element sports">
                    <h1><a href="#">Sports</a></h1>
                </div>
                <div class="element opinion">
                    <h1><a href="#">Opinion</a></h1>
                </div>
                
            </div>
        </div>
    </div>
</body>
</html>

這是我的 CSS 代碼：

body
{
    background-color: indianred;
}

.heading
{
    text-align: center;
    font-size: 120px;
    font-family: 'Cedarville Cursive', cursive;
    margin: 0px 0px;
}
.flex
{
    display: flex;
    align-items:stretch;
    border: 2px solid black;
    align-content: center;
    margin:2.0%;
    height: 100%;
   
}
.blk
{
    padding: 7px;
    text-align: center;
    
}
.s50
{
    width: 50%;
    border-left: 2px solid black;
    border-right: 2px solid black; 
    
}

.s25
{
    height: inherit;
    width: 25%;
}
.s75
{
    width: 75%;
}
.title
{
    font-family: 'Aladin', cursive;
    font-size: 60px;
}

.cust
{
    border-right: 2px black solid;
}
.inner-flex
{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}



p{
    text-align: justify;
}
.element
{
    text-align:left;
}
.politics
{
    background-color: #ffeaa7;;
}

.technology
{
    background-color: #81ecec;;
}

.local
{
    background-color: #55efc4;;
}

.sports
{
    background-color: #a29bfe;;
}

.opinion
{
    background-color: #74b9ff;;
}

但是，您會看到在放大頁面時，inner-flex div 並沒有占據整個長度。 任何想法如何解決它？

Answer 1

這是因為你有不同的元素結構。

在原始示例中，父 flex 行（ <section class="row"> ）設置了align-items: stretch; css 屬性。 這負責拉伸。

原來的：

<section class="row">
    <article class="story quarter">
      <!-- content //-->
    </article>
    <ul class="story three-quarter other-sections">
       <!-- links //-->
    </ul>
</section>

這實際上在您的代碼中有效，但它僅適用於額外的容器 div ( <div class="blk s75"> )，不適用於該容器的內容。 因此，您的.inner-flex不會被拉伸，而是會獲得適合其內容的高度。

您的代碼：

<div class="flex">
    <div class="blk s25 cust">
        <!-- content //-->
    </div>
    <div class="blk s75">
        <div class="inner-flex">
            <!-- links //-->
        </div>
    </div>
</div>

您可以通過修復結構並消除額外的容器或（如評論中已建議的那樣）通過應用 css 屬性height: 100%; 到類.inner-flex 。

您還可以應用 css 屬性flex-grow: 1; 到.element類以關閉框之間的間隙（這在技術上也在評論中提出，因為flex: 1;是設置 flex-grow 等的快捷屬性）。

為什么我的 flexbox 沒有占據它所包含的容器的整個高度？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-09-06 22:01:47

為什么我的 flexbox 沒有占據它所包含的容器的整個高度？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-09-06 22:01:47

解決方案1
1 已采納 2020-09-06 22:01:47