为啥我的弹性物品没有包装?

Posted

技术标签:

【中文标题】为啥我的弹性物品没有包装?【英文标题】:Why are my flex items not wrapping?为什么我的弹性物品没有包装? 【发布时间】:2017-11-28 06:00:07 【问题描述】:

所以我在他们自己的 flex-item div 中添加了 3 个图像,它们都位于一个 flex-container div 中,图像随着我缩小浏览器窗口而缩放,但是它们都保持内联而不是包装并成为单列,关于如何使它们包装的任何想法?看起来是这样的:

div class="intro">
    <section id="intro-box">
      <h2>In a nutshell</h2>
      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened
        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>
      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand
        beaches.
      </p>
      <div class="flex-container">
        <!--Photo from: www.santorinicrystalblue.com -->
        <div class="flex-item"><img class="img-fluid" src="media/sontorini-greece.jpg"></div>
        <!--Photo from: www.static2.traveltek.net -->
        <div class="flex-item"><img class="img-fluid" src="media/santorini-view-1.jpg"></div>
        <!--Photo from: www.mylossantorini.com-->
        <div class="flex-item"><img class="img-fluid" src="media/santorini-restaurant.jpg"></div>
      </div>
    </section>
  </div>
</main>

这是 CSS:

    /* Flexbox */

.intro .flex-container 
  width: 100%;
  display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;


.intro .flex-item 
  width: 30%;
  flex-direction: column;


.intro .img-fluid 
  width: 90%;
  padding: 2rem 0rem 2rem 0rem;
 

提前致谢!

【问题讨论】:

你告诉弹性项目有width: 30%。那是父级(弹性容器)的 30%。因此,即使父项是 6px 宽,每个项目也将占其中的 30%,并且它们永远不会换行。相反,使用固定宽度或媒体查询。 【参考方案1】:

您需要使用媒体查询来更改 .flex-item 的宽度。除非你这样做,否则它将始终使它们占窗口的 30%,因此它们永远不会换行。

我提供了一个示例,其中我用一些库存图片替换了您的图片,并包含了一个媒体查询以使其在 600 像素处换行。

  /* Flexbox */

.intro .flex-container 
  width: 100%;
  display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;


.intro .flex-item 
  width: 30%;
  flex-direction: column;


.intro .img-fluid 
  width: 90%;
  padding: 2rem 0rem 2rem 0rem;
 

@media screen and (max-width:600px) 
  .intro .flex-item 
    width:50%;
  
<div class="intro">
    <section id="intro-box">
      <h2>In a nutshell</h2>
      <p>Santorini is one of the Cyclades islands in the Aegean Sea belonging to Greece. It boasts masses of breathtaking cliffs rising over 300m from a submerged caldera. One of the of the most sizeable volcanic eruptions in recorded history happened
        in the island about 3,600 years ago – the Minoan eruption, it occurred at the height of the Minoan civilization.</p>
      <p>Santorini is famous for its dramatic views, spectacular sunsets, peculiar white aubergines and the beautiful town of Thira. The island pulls in circa 1.5 million tourists annually which all flock to experience the stunning panoramas and volcanic-sand
        beaches.
      </p>
      <div class="flex-container">

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>

        <div class="flex-item"><img class="img-fluid" src="http://www.unsplash.it/400/300"></div>
      </div>
    </section>
  </div>

【讨论】:

【参考方案2】:

两个解决你的问题..

您可以使用媒体查询或

您可以将图像格式%的宽度更改为px或类似单位 这样浏览器将尝试保持给定的宽度 如果宽度以百分比给出,它将尝试减小或增加图像的大小,因此没有空间用于换行

【讨论】:

以上是关于为啥我的弹性物品没有包装?的主要内容,如果未能解决你的问题,请参考以下文章

为啥 mongoosastic 填充/弹性搜索没有填充我的参考资料之一?我得到一个空对象

如何防止弹性项目在没有包装的情况下溢出弹性父项?

为啥这个 C++ 包装类没有被内联?

为啥像 IE9 这样的旧浏览器没有弹性盒 polyfill?

Flexbox:一旦另一个弹性项目的宽度为0,如何包装一个弹性项目?

为啥 ElasticSearch 没有找到我的术语