为什么CSS Flex-box不能包装一半的物品？

如何解决为什么CSS Flex-box不能包装一半的物品？

问题

由于某种原因，弹性包装盒中的一半物品没有包装。在检查浏览器中的元素（下图）之后，似乎认为它们占据了整个容器宽度的空间。他们只应该占据每个空间的三分之一。

请找到该代码的最小代表样本：

#portfolio #portfolio-flters {
  padding: 0;
  margin: 5px 0 35px 0;
  list-style: none;
}

#portfolio #portfolio-flters li {
  margin: 15px 15px 15px 0;
  display: inline-block;
  padding: 6px 20px;
  line-height: 20px;
  margin-bottom: 5px;
}


#portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

#portfolio .portfolio-item {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

#portfolio .portfolio-item .portfolio-wrap {
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  margin: 0;
}


#portfolio .portfolio-item .portfolio-wrap .portfolio-info {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
}

#portfolio .portfolio-item .portfolio-wrap .portfolio-info h4 {
  line-height: 1px;
  margin-bottom: 14px;
  padding-bottom: 0;
}




#portfolio .portfolio-item .portfolio-wrap .portfolio-info p {
  padding: 0;
  margin: 0;
 }

#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview,#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details {
  display: inline-block;
  line-height: 1;
  text-align: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 10px 4px 0 4px;
}

#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-preview i,#portfolio .portfolio-item .portfolio-wrap .portfolio-info .link-details i {
  padding-top: 6px;
}

<section id="portfolio" class="clearfix">
      <div class="container">

        <header class="section-header">
          <h3 class="section-title">Our Portfolio</h3>
        </header>

        <div class="row">
          <div class="col-lg-12">
            <ul id="portfolio-flters">
              <li data-filter="*" class="filter-active">All</li>
              <li data-filter=".filter-app">App</li>
              <li data-filter=".filter-card">Card</li>
              <li data-filter=".filter-web">Web</li>
            </ul>
          </div>
        </div>

        <div class="row portfolio-container">

          <div class="col-lg-4 col-md-6 portfolio-item filter-app">
            <div class="portfolio-wrap">
              <img src="placehold.co" class="img-fluid" alt="">
              <div class="portfolio-info">
                <h4>T</h4>
                <p>T</p>
                
              </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 portfolio-item filter-web" data-wow-delay="0.1s">
            <div class="portfolio-wrap">
              <img src="placehold.co" class="img-fluid">
              <div class="portfolio-info">
                <h4></h4>
                <p></p>
                <div>
                  
                  <a class="link-details" title="More Details"><i class="ion ion-android-open"></i></a>
                </div>
              </div>
            </div>
          </div>
          
          <!--These elements repeat,essentially the only thing that differs is the size of the image and the image file,the links etc-->

解决方法

从外观上，您需要在.col .row div内添加.portfolio-container div。但是您所有有问题的div似乎都不在.row .portfolio-container之外，因此也许可以解释为什么一半的div占用了所有空间。你能仔细检查一下吗？