垂直拉伸柔性箱項目

我想讓列表佔用所有的藍色空間，但我不想添加其他項目。我可以給這些物品填充適量，以使其完美貼合，但我覺得這不是正確的方法。所以我認爲必須有一種方法可以用flexbox來做到這一點。垂直拉伸柔性箱項目

見plunker和摘要：

html, 
 
body { 
 
    margin: 0px; 
 
    height: 100%; 
 
} 
 

 
main { 
 
    display: flex; 
 
} 
 

 
#art1 { 
 
    flex: 2; 
 
    margin-right: 20px; 
 
    background: red; 
 
    display: flex; 
 
} 
 

 
#art2 { 
 
    background: blue; 
 
    flex: 1; 
 
} 
 

 
#art1>img, 
 
#art1>p { 
 
    flex: 1; 
 
} 
 

 
article {} 
 

 
@media (max-width: 800px) { 
 
    main { 
 
    flex-direction: column; 
 
    } 
 
    #art1 { 
 
    margin: 0; 
 
    } 
 
} 
 

 
.activiteiten { 
 
    background: yellow; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.activiteiten>li { 
 
    background: white; 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
}

<main> 
 
    <article id="art1"> 
 
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p> 
 
    <img src="http://via.placeholder.com/150x250" alt=""> 
 
    </article> 
 
    <article id="art2"> 
 
    <ul class="activiteiten"> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
    </ul> 
 
    </article> 
 
</main>

來源

2017-09-16 SjaakvBrabant

讓你ul一個Flexbox的太：

height: 100%; 
margin: 0; // reset the margin 
display: flex; 
flex-direction: column; // list vertically 
justify-content: space-around; // spread the li vertically

，並添加flex: 1到li小號

請參見下面的演示：

html, 
 
body { 
 
    margin: 0px; 
 
    height: 100%; 
 
} 
 

 
main { 
 
    display: flex; 
 
} 
 

 
#art1 { 
 
    flex: 2; 
 
    margin-right: 20px; 
 
    background: red; 
 
    display: flex; 
 
} 
 

 
#art2 { 
 
    background: blue; 
 
    flex: 1; 
 
} 
 

 
#art1>img, 
 
#art1>p{ 
 
    flex: 1; 
 
} 
 

 
article {} 
 

 
article ul { 
 
    height: 100%; 
 
    margin: 0; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
} 
 

 
article ul li { 
 
    flex: 1; 
 
} 
 

 
@media (max-width: 800px) { 
 
    main { 
 
     flex-direction: column; 
 
    } 
 
    #art1 { 
 
     margin: 0; 
 
    } 
 
} 
 

 
.activiteiten { 
 
    background: yellow; 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.activiteiten>li{ 
 
    background: white; 
 
    border: 1px solid green; 
 
    padding: 10px; 
 
}

<main> 
 
    <article id="art1"> 
 
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p> 
 
    <img src="http://via.placeholder.com/150x250" alt=""> 
 
    </article> 
 
    <article id="art2"> 
 
    <ul class="activiteiten"> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
     <li>Lorem ipsum</li> 
 
    </ul> 
 
    </article> 
 
</main>

來源

2017-09-16 14:29:41 kukkuz

@SjaakvBrabant這個您的想法，謝謝！ – kukkuz

這是我所要求的，但現在我遇到了另一個問題。因爲'li'不會互相靠攏，所以你可以看到'ul'背景。 [見這裏]（https://imgur.com/a/e80iI），希望它有道理。 – SjaakvBrabant

@SjaakvBrabant修復它，看到更新的答案... – kukkuz

垂直拉伸柔性箱項目

回答

相關問題