css - 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，因此 children 被迫进入单例。

为了让 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>