Flexbox行向下推列

Question

我一直在使用flex布局一段时间了。 主要是圣杯式布局，效果很好。

今天决定尝试创建相同的东西来帮助我了解有关flexbox的更多信息。 但是使用右侧栏目作为侧边栏区域，使用行作为徽标/标题和页面div。

我把它放在一个codepen中，这样你就可以自己看到标记代码了。 我的问题是设置为行的徽标/标题和主页向下推动列。

<div class="wrapper">
      <div class="nav">logo content and site banner goes here
        <div class="spacer">

</div>
  <div class="content">main page content goes here</div>
      </div>


    <div class="one">page index goes here</div>
    <div class="two">twitter logo goes here</div>
    <div class="three">chatbox goes here</div>

    </div>
div {

  box-sizing: border-box;
}

.wrapper {
  border: 2px solid blue;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;


}

.nav {

  flex-direction: row;
  border: 2px solid green;
  width: 100%;
  height: 100px;
  align-self: flex-start;
  padding-left: 8px;
  margin-bottom: 4px;
}

.spacer {

  height: 140px;
  width: 100%;
}

.content {

  flex-direction: row;
  border: 2px solid green;
  height: 40px;
  padding-left: 8px;
  align-self: flex-start;




}

.one {
  width: 200px; 
  height: 200px;
  border: 2px solid red;
  flex-grow: 0;
  padding: 8px;


}

.two {
  width: 200px; 
  height: 200px;
  border: 2px solid red;
  flex-grow: 0;
  padding: 8px;

}

.three {
  width: 200px; 
  height: 200px;
  border: 2px solid red;
  flex-grow: 0;
  padding: 8px;
}

https://codepen.io/anon/pen/GmZWvp

即使在宽度达到列之前将宽度设置为较小的值 块向下推动列，我怎么能这样做呢？它不会影响右边的列？

我知道我可以定位：绝对是主页面div，或者在logo / heading中创建一个嵌套的div 并给它说120px的高度;让它低于徽标标题。

但是必须有一种方法可以在列旁边放一行，而不会将列向下推。 因为徽标标题/主页面的div /行是块元素。

如果你知道怎么做，请告诉我要改变什么，在哪里以及为什么等。 再次，这不是为了生产，只是为了看看我能否解决这个古怪的难题。

Answer 1

首先，即使您在display: flex上设置了wrapper，也无法在其子项上设置flex-direction: row（或列）来更改其方向。应在Flex容器上设置flex-direction属性，在本例中为wrapper。如果你想改变属于一个flex容器的flex项的方向，你需要包装它们并使嵌套的包装器成为flex项和flex容器，这里使用我的第一个样本中的side包装器< / em>的

如果你稍微重新安排你的标记，你可以得到这个

＆＃13;

＆＃13;

div {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid blue;
  display: flex;
}

.nav {
  border: 2px solid green;
  width: 100%;
  height: 100px;
  padding-left: 8px;
  margin-bottom: 4px;
}

.content {
  flex: 1;
  border: 2px solid green;
  height: 40px;
  padding-left: 8px;
}

.side {
  width: 200px;
}

.one {
  height: 200px;
  border: 2px solid red;
  padding: 8px;
}

.two {
  height: 200px;
  border: 2px solid red;
  padding: 8px;
}

.three {
  height: 200px;
  border: 2px solid red;
  padding: 8px;
}

＆＃13;

<div class="nav">logo and site banner goes here</div>

<div class="wrapper">

  <div class="content">main page content goes here</div>

  <div class="side">
    <div class="one">page index goes here</div>
    <div class="two">twitter logo goes here</div>
    <div class="three">chatbox goes here</div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

如果您无法或不想要更改标记，则需要将flexbox与绝对定位结合起来。

＆＃13;

＆＃13;

div {
  box-sizing: border-box;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
}

.nav {
  border: 2px solid green;
  width: 100%;
  height: 100px;
  padding-left: 8px;
  margin-bottom: 4px;
}

.content {
  width: calc(100% - 200px);
  border: 2px solid green;
  height: 40px;
  padding-left: 8px;
}

.one, .two, .three {
  position: absolute;
  right: 0;
  width: 200px;
  height: 200px;
  border: 2px solid red;
  padding: 8px;
}

.one {
  top: 104px;
}

.two {
  top: 304px;
}

.three {
  top: 504px;
}

＆＃13;

<div class="wrapper">

  <div class="nav">logo and site banner goes here</div>

  <div class="content">main page content goes here</div>

  <div class="one">page index goes here</div>
  <div class="two">twitter logo goes here</div>
  <div class="three">chatbox goes here</div>

</div>

＆＃13;

＆＃13;

＆＃13;