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
  라인 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>