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-direction:column; 并将其与 justify-content: space-between; 结合使用，或者通过 flex-wrap: wrap;

使用多行 flexbox

Answer 2

弹性项目一个接一个地显示，因为默认情况下，flex-wrap 设置为 nowrap，因此子项被强制为单个项目。

为了让弹性项目分成多行，你可以使用

.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>

Flexbox 彼此相邻对齐，尽管宽度设置为 100%

Flexboxes aligning next to each other, although width is set to 100%

css

flexbox