Flexbox margin-top：自动不将项目推到底部

Question

我希望 UL 将每个项目推到容器底部。我为该项目设置了 margin-top:auto 但它不起作用。我有另一个可用的演示，但这是我需要使用的演示。有什么帮助吗？

.featured-products-carousel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1150px;
  width: 80%;
}
.featured-products-carousel .item {
  background-color: white;
  padding: 20px;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.featured-products-carousel .item h2 {
  text-align: center;
  padding: 8px 5px;
}
.featured-products-carousel .item .featured-product-description {
  margin-bottom: auto;
}
.featured-products-carousel .item .featured-products-links {
  margin-top: auto;
}
.featured-products-carousel .item ul {
  margin-top: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featured-products-carousel" role="listbox">
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
        
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
       
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
   
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
</div>

Answer 1

父元素不是display: flex;，即使您已指定它，因为有另一条规则用display: block!important; 覆盖它。

• display: block!important 来自第 6636 行的 bootstrap.css 和第 6554 行的另一个。

.featured-products-carousel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1150px;
  width: 80%;
}
.featured-products-carousel .item {
  background-color: white;
  padding: 20px;
  align-items: stretch;
  display: flex!important;
  flex-direction: column;
  margin: 10px;
  padding: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
}
.featured-products-carousel .item h2 {
  text-align: center;
  padding: 8px 5px;
}
.featured-products-carousel .item .featured-product-description {
  margin-bottom: auto;
}
.featured-products-carousel .item .featured-products-links {
  margin-top: auto;
}
.featured-products-carousel .item ul {
  margin-top: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="featured-products-carousel" role="listbox">
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
        
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
       
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. Description Text. Lots and lots of great content about a particular part.</p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
   
</div>
<div class="item  active visible-md visible-sm visible-lg product-item col-xs-12 col-md-3 col-sm-6" id="2">
    <span class="h2-span">
        <h2 class="h2-height"> [product-id] &nbsp; </h2>
    </span>
    
        
        <div class="product-image">
            <a href="/products/[[product-id]]">
                    <img src="http://placehold.it/400x250" alt="[item-description]" class="img-responsive-center">
                
        </a>
        </div>
        <p class="featured-product-description"> Description Text. Lots and lots of great content about a particular part. </p>
        
            <ul class="list-unstyled">
                <li>
                    <a href="/products/[product-id]">
                    More About [product-id]&nbsp;»
                    </a>
                </li>
                <li>
                    <a href="[product-id].pdf">Datasheet</a>
                </li>
            </ul>
        
    
</div>
</div>