垂直拉伸flexbox项目

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>