Flexbox margin-top: авто не толкает элемент вниз

Question

Я хочу, чтобы UL выдвигал в конец контейнера для каждого элемента. У меня есть margin-top: автоматическая настройка для элемента, но он не работает. У меня есть другое демо, которое работает, но это то, что мне нужно использовать. Любая помощь?

.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 идет от bootstrap.css по строке 6636, а другой по строке 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>