Flexbox 行向下推列

Question

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

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

我已将其放入代码笔中，以便您自己查看标记代码。 我的问题是徽标/标题和主页在设置为行时会将列向下推。

<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，或在徽标/标题中创建嵌套 div 并给它120px的高度；让它低于标志标题。

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

如果您知道如何执行此操作，请告诉我要更改的内容、位置和原因等。 同样，这不是用于生产的，只是为了看看我是否能解决这个古怪的难题。

Answer 1

首先，即使你在wrapper 上设置display: flex，你也不能在它的子元素上设置flex-direction: row（或列）来改变它们的方向。 flex-direction 属性应该在 flex 容器上设置，在本例中为 wrapper。如果你想改变属于一个弹性容器的弹性项目的方向，你需要包装它们并使嵌套的包装器既是弹性项目又是弹性容器，这里用我的第一个示例中的side包装器完成

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

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;
}

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

---

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

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;
}

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