垂直拉伸柔性箱项目

Question

我想让列表占用所有的蓝色空间，但我不想添加其他项目。 我可以给这些物品填充适量，以使其完美贴合，但我觉得这不是正确的方法。所以我认为必须有一种方法可以用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>

Answer 1

让你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>