Zurb基礎柔性電網問題

Question

我使用的是zurb基礎v.6，它的柔性電網取代了使用浮動電極的正常電網。我已經做了一個頁腳，我有兩個div，我希望每個div都對齊到自己的末尾。這是代碼：

<footer id="footer"> 
    <div class="row align-justify align-middle"> 
    <div class="column small-6"> 
     Adresse, org. nr, lenke til kontakt 
    </div> 
    <div class="column small-6"> 
     <img src="/img/facebook.svg"> 
     <img src="/img/twitter.svg"> 
    </div> 
    </div> 
</footer> 

這是它的CSS：

#footer { 
    height: 4rem; 
    position: relative; 
    z-index: 1; 
    background-color: $gray; 

    .social-links { 
    display: flex; 
    justify-content: flex-end; 
    } 
} 

我的問題是，頁腳未服用的4rem的高度，它只是需要圖像的高度。我該如何解決這個問題？

Answer 1

新增CSS

.align-middle { 
    display: flex; 
    justify-content: space-between; 
    flex-flow: row wrap; 
    align-items:center; 
    height:100%; 
} 

#footer { 
 
    height: 4rem; 
 
    position: relative; 
 
    z-index: 1; 
 
    background-color: #ddd; 
 
} 
 

 
.social-links { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
} 
 

 
.align-middle { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-flow: row wrap; 
 
    align-items:center; 
 
    height:100%; 
 
}

<footer id="footer"> 
 
    <div class="row align-justify align-middle"> 
 
    <div class="column small-6"> 
 
     Adresse, org. nr, lenke til kontakt 
 
    </div> 
 
    <div class="column small-6"> 
 
     <img src="/img/facebook.svg"> 
 
     <img src="/img/twitter.svg"> 
 
    </div> 
 
    </div> 
 
</footer>