Flexbox彼此​​对齐，但宽度设置为100％

Question

对不起，标题不好，我不确定如何更好地解释我的问题。请随时将其更改为更好的内容。

此外，我对flexboxes还是陌生的，这使得查找问题变得更加困难。因此，我设置了一个JSFiddle来展示我的问题。

/* Layout */

#pagecontentwrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%;
  padding: 25px;
}
/* Inhalte */

#flexcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/* Flex */

.rowParent,
.columnParent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.columnParent {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flexMother {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flexChild {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  display: flex;
}
.topflex {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: flex-start;
  align-self: flex-start;
  width: 100%;
}
.bottomflex {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: flex-end;
  align-self: flex-end;
}
#aktuelles {
  border: 1px solid #004985;
}
#besucher,
#raumplan,
#media,
#topnews,
#technik {
  border: 1px solid #a0a0a0;
}
#besucher,
#raumplan,
#topnews {
  margin-bottom: 35px;
}
#aktuelles {
  margin-right: 25px;
}
#besucher,
#raumplan,
#media {
  margin-right: 12px;
}
#topnews,
#technik {
  margin-left: 13px;
}
article.news_front {
  padding: 20px;
}
article.news_front:last-of-type {
  margin-bottom: 0;
}
article.news_front:last-of-type section {
  border-bottom: none;
}
article.news_front section {
  border-bottom: 1px solid #004985;
}
article.news_front section p:first-of-type {
  display: inline;
}
article.besucher_front section {
  margin-left: 45px;
}
.topflex {
  background-color: red;
}
.bottomflex {
  background-color: grey;
}

<div id="pagecontentwrapper">
  <div id="flexcontainer" class="flexMother rowParent">
    <div id="aktuelles" class="flexChild">
      <div class="topflex">
        <h1 class="frontpage">Aktuelles</h1>

        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 16:09&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 12:00&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 8:15&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
      </div>
      <div class="bottomflex">Historie</div>
    </div>
    <div id="rechtehaelfte" class="flexChild rowParent">
      <div id="mittlerespalte" class="flexChild columnParent">
        <div id="besucher" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Besucher</h1>

            <article class="besucher_front">
              <p>Für heute sind keine Besucher eingetragen.</p>
            </article>
          </div>
          <div class="bottomflex">&nbsp;</div>
        </div>
        <div id="raumplan" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Raumplan</h1>

            <article class="besucher_front">
              <p>Für heute ist keine Raumbelegung eingetragen.</p>
            </article>
          </div>
          <div class="bottomflex">&nbsp;</div>
        </div>
        <div id="media" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Media</h1>

            <p>image here</p>
          </div>
        </div>
      </div>
      <div id="rechtespalte" class="flexChild columnParent">
        <div id="topnews" class="flexChild">
          <div class="topflex">

            <h1 class="frontpage">Top-News</h1>

            <article class="topnews_front">
              <section>
                <p>Lorem ipsum...</p>
              </section>
            </article>
          </div>
          <div class="bottomflex" id="topnews_historie">Historie</div>
        </div>
        <div id="technik" class="flexChild">
          <div class="topflex">

            <h1 class="frontpage">Technik</h1>

            <article class="news_front">
              <section><span class="posttime">3. 1. 2015, 21:36&nbsp;Uhr</span>&nbsp;&nbsp;
                <p>Lorem ipsum...</p>
              </section>
            </article>
          </div>
          <div class="bottomflex" id="technik_historie">Historie</div>
        </div>
      </div>
    </div>
  </div>
</div>

我要实现的是，将.bottomflex-container放置在下方.topflex-container，而不是像发生时那样紧挨它。

我定下来后，可以暂时达到那种效果

flex-direction: column;

到.flexChild。但是后来我失去了行为，因为我.bottomflex-container坐在周围盒子的底部，我明白为什么会发生这种情况。

我不确定是否要尝试做一些不可能的事情并且需要做不同的事情，或者我只是缺少一些代码行。

Answer 1

因为默认情况下将flex项目flex-wrap设置为nowrap，所以flex项目会挨着显示，因此子级将被强制合并为一个。

为了允许弹性项目分成多行，您可以使用

.flexChild {
    flex-wrap: wrap;
}

/* Layout */

#pagecontentwrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%;
  padding: 25px;
}
/* Inhalte */

#flexcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/* Flex */

.rowParent,
.columnParent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.columnParent {
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flexMother {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.flexChild {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  display: flex;
  flex-wrap: wrap;
}
.topflex {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: flex-start;
  align-self: flex-start;
  width: 100%;
}
.bottomflex {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: flex-end;
  align-self: flex-end;
}
#aktuelles {
  border: 1px solid #004985;
}
#besucher,
#raumplan,
#media,
#topnews,
#technik {
  border: 1px solid #a0a0a0;
}
#besucher,
#raumplan,
#topnews {
  margin-bottom: 35px;
}
#aktuelles {
  margin-right: 25px;
}
#besucher,
#raumplan,
#media {
  margin-right: 12px;
}
#topnews,
#technik {
  margin-left: 13px;
}
article.news_front {
  padding: 20px;
}
article.news_front:last-of-type {
  margin-bottom: 0;
}
article.news_front:last-of-type section {
  border-bottom: none;
}
article.news_front section {
  border-bottom: 1px solid #004985;
}
article.news_front section p:first-of-type {
  display: inline;
}
article.besucher_front section {
  margin-left: 45px;
}
.topflex {
  background-color: red;
}
.bottomflex {
  background-color: grey;
}

<div id="pagecontentwrapper">
  <div id="flexcontainer" class="flexMother rowParent">
    <div id="aktuelles" class="flexChild">
      <div class="topflex">
        <h1 class="frontpage">Aktuelles</h1>

        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 16:09&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 12:00&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
        <article class="news_front">
          <section><span class="posttime">13. 11. 2014, 8:15&nbsp;Uhr</span>&nbsp;&nbsp;
            <p>Lorem ipsum...</p>
          </section>
        </article>
      </div>
      <div class="bottomflex">Historie</div>
    </div>
    <div id="rechtehaelfte" class="flexChild rowParent">
      <div id="mittlerespalte" class="flexChild columnParent">
        <div id="besucher" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Besucher</h1>

            <article class="besucher_front">
              <p>Für heute sind keine Besucher eingetragen.</p>
            </article>
          </div>
          <div class="bottomflex">&nbsp;</div>
        </div>
        <div id="raumplan" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Raumplan</h1>

            <article class="besucher_front">
              <p>Für heute ist keine Raumbelegung eingetragen.</p>
            </article>
          </div>
          <div class="bottomflex">&nbsp;</div>
        </div>
        <div id="media" class="flexChild">
          <div class="topflex">
            <h1 class="frontpage">Media</h1>

            <p>image here</p>
          </div>
        </div>
      </div>
      <div id="rechtespalte" class="flexChild columnParent">
        <div id="topnews" class="flexChild">
          <div class="topflex">

            <h1 class="frontpage">Top-News</h1>

            <article class="topnews_front">
              <section>
                <p>Lorem ipsum...</p>
              </section>
            </article>
          </div>
          <div class="bottomflex" id="topnews_historie">Historie</div>
        </div>
        <div id="technik" class="flexChild">
          <div class="topflex">

            <h1 class="frontpage">Technik</h1>

            <article class="news_front">
              <section><span class="posttime">3. 1. 2015, 21:36&nbsp;Uhr</span>&nbsp;&nbsp;
                <p>Lorem ipsum...</p>
              </section>
            </article>
          </div>
          <div class="bottomflex" id="technik_historie">Historie</div>
        </div>
      </div>
    </div>
  </div>
</div>