html - Flexbox 行向下推列

Question

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

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

我已将它放在代码笔中，这样您就可以自己查看标记代码。 我的问题是 Logo /标题和主页在设置为行时将列向下推。

<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

即使在它到达列之前将宽度设置为更小的值 该 block 将列向下推，我怎么能在不影响右侧列的情况下执行此操作？

我知道我可以定位:绝对主页 div，或在 Logo /标题中创建嵌套 div 并给它 120px 的高度；使其位于 Logo 标题下方。

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

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

Answer 1

首先，即使您在wrapper 上设置了display: flex，您也无法设置flex-direction: row (或列)在它的 child 身上改变他们的方向。 flex-direction 属性应该设置在 flex 容器上，在本例中是 wrapper。如果你想改变属于一个 flex 容器的 flex 元素的方向，你需要包装它们并使嵌套包装器既是 flex 元素又是 flex 容器，这里用我的 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>