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

时间：2015-01-13 00:31:41

标签： css flexbox

抱歉标题不好，我不知道如何更好地解释我的问题。请随意将其更改为更好的内容。

此外，我是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位于周围框的底部，我理解为什么会这样。

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

2 个答案:

答案 0 :(得分：4)

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

为了让flex项分成多行，你可以使用

.flexChild {
    flex-wrap: wrap;
}

＆＃13;
＆＃13; 
/* 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：3)

您可以使用flex-direction:column;并将其与justify-content: space-between;合并，也可以通过flex-wrap: wrap;

使用多行Flexbox
相关问题
最新问题