FlexBox在div

Question

我是flexbox的新手，但我有一个包含三个子div的父div。三个子div每个都是100％宽度。前两个div是固定高度。我希望第三个子div填写父div的其余部分。

＆＃13;

＆＃13;

* {
  margin: 0;
}

.flex-container {
  display: flex;
  height: 300px;
  flex-wrap: wrap;
  border: 1px solid blue;
  background-color: gray;
  align-content: flex-start;
}

.flex-item1 {
  width: 100%;
  height: 10px;
  background: yellow;
}

.flex-item2 {
  width: 100%;
  height: 10px;
  border: 1px solid red;
  background: red;
}

.flex-item3 {
  width: 100%;
  border: 3px solid purple;
  background: purple;
  align-self: stretch;
  height: auto;
}


/* another attempt for the third child div */


/*     .flex-item3{
            width: 100%;
            border: 3px solid purple;
            background: purple;
            flex-direction: row;
            flex-grow: 1;
        } */

＆＃13;

<div class="flex-container">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
  <div class="flex-item3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

我制作了一个jsFiddle here。

谁能告诉我我做错了什么？

修改

我正在努力不要制作flex-direction: column因为我希望第三个子div成为一行。

Answer 1

在第3项中使用flex:1，在父

中使用flex-direction:column

＆＃13;

＆＃13;

.flex-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 100%
}

.flex-item1 {
  height: 10px;
  background: yellow;
}

.flex-item2 {
  height: 10px;
  background: red;
}

.flex-item3 {
  flex: 1;
  background: blue
}

＆＃13;

<div class="flex-container">
  <div class="flex-item1"></div>
  <div class="flex-item2"></div>
  <div class="flex-item3"></div>
</div>

＆＃13;

＆＃13;

＆＃13;