为啥 flexbox 在包裹项目时不向下推后续内容？

Posted 2023-03-07

【中文标题】为啥 flexbox 在包裹项目时不向下推后续内容？

【英文标题】：Why is flexbox not pushing subsequent content down when it's items are wrapped?为什么 flexbox 在包裹项目时不向下推后续内容？

【发布时间】：2019-06-17 17:16:08

【问题描述】：

在for collectors div 换行之前，我的布局工作正常。此时，后续的what artists are saying div 不会被推到包装内容的下方。有人知道为什么吗？

我尝试将 `for collectors' 弹性框的 align-content 设置为各种设置。

附注使用 Tailwind.css

元素未包装时显示

未包装：

在元素被包裹时显示

包装后：

html

    <!-- for artist-for collectors -->
        <div class="for-artists-and-collectors flex flex-wrap">

            <div class="flex justify-start h-full bg-red">

                <div class="for-container flex flex-col justify-center w-full h-full bg-black px-8">
                    <h2 class="text-white pb-2">For Artists</h2>
                    <div class="text-sm text-white text-left pb-4">
                        I want to auction my artwork using K****o
                    </div>
                    <k-button style="height: 40px;">Create Account -></k-button>
                </div>

                <div class="for-artists-bg h-full flex-grow flex-shrink"></div>

            </div>

            <div class="flex justify-start h-full bg-green">

                <div class="for-container flex flex-col justify-center w-full h-full bg-gray px-8">
                    <h2 class="text-white pb-2">For Collectors</h2>
                    <div class="text-sm text-white text-left pb-4">
                        I want to discover & bid on original artwork
                    </div>
                    <k-button style="height: 40px;">Browse Auctions -></k-button>
                </div>

                <div class="for-collectors-bg h-full flex-grow flex-shrink"></div>

            </div>

        </div>
        <!-- /for artist-for collectors -->

        <!-- what artists are saying -->
        <div class="flex content-between">

            <div class="waas flex flex-col items-end">

                <h2 class="text-black waas-title text-right mb-6">
                    What artists are saying
                </h2>

                <div class="waas-controls flex">
                    <k-button 
                        style="height: 40px; width: 40px;" 
                        color="white"
                        class="mr-2">
                        <left-arrow-black />
                    </k-button>
                    <k-button style="height: 40px; width: 40px;">
                        <left-arrow-white class="right-arrow" />
                    </k-button>
                </div>

            </div>

            <div class="artist-profile">

            </div>
        </div>

风格

.for-artists-and-collectors 
    height: 220px;


.for-artists-and-collectors > div 
    flex:  1 1 50%;
    min-width: 300px;


.for-artists-bg 
    background-image: url("https://images.unsplash.com/photo-1482245294234-b3f2f8d5f1a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80");
    background-position: center center;


.for-collectors-bg 
    background-image: url("https://images.unsplash.com/photo-1536574753884-8c45a0431ecf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80");
    background-position: center center;


.for-container 
    max-width: 220px;

【参考方案1】：

当在父元素上设置绝对高度，然后在子元素上设置百分比高度时，会出现问题。在我不知道任何其他测量组合也会导致问题。

编码

Problem 和 Solution

简化问题

<div class="parent">
  <div class="child-1">child 1</div>
  <div class="child-2">child 2</div>
</div>

<div class="other">Other div</div>

-

.parent 
  display: flex;
  flex-wrap: wrap;
  height: 80px;


.parent > div 
  flex: 1 1 50%;
  min-width: 300px;
  height: 100%; /* this is the problem */


.child-1 
  background-color: red;


.child-2 
  background-color: green;


.other 
  width: 100px;
  height: 100px;
  background-color: orange;

解决方案

/* removed parent height */
.parent 
  display: flex;
  flex-wrap: wrap;


.parent > div 
  flex: 1 1 50%;
  min-width: 300px;
  height: 50px; /* set an absolute height here */