为什么 CSS Flex-box 没有包裹一半的物品？

Question

Question

For some reason, half of the items in the flex-box are not wrapping. After inspecting the elements in the browser (picture below) it seems as thought they are taking up a whole container width's worth of space. Wheras they are only supposed to take up a third of the space each.

Please find a minimum representative sample of the code:

 #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-->

Answer 1

From the looks of it you need to add the .col divs inside a .row .portfolio-container div. But all your problematic divs seem to be outside the .row .portfolio-container so maybe that explains why half of your divs are taking all the space. Can you double check that?