Flex-box 将导航项与侧边栏对齐

Question

在一个简单的弹性框布局中，我试图将导航项与第一个（左侧）侧边栏的末尾对齐。我的第一个想法是用 :before element :after 重新创建 aside main aside 布局，以便导航项始终与侧边栏对齐，但我似乎无法获得 :before 和 :after元素以匹配每个 aside 的大小。这是我正在尝试做的一个例子 Flex Example

这是我当前使用的代码

http://codepen.io/anon/pen/GoJEbX?editors=010

Answer 1

我不会在这里使用 flex-wrapping 行。从 flex-direction:column 开始以获得完整的 100% 高度然后将中间内容（main 和 aside 元素）放在它们自己的 flex-container 中是有意义的，然后可以增长根据需要。

横向布局都是flexbox。

根据原始代码，aside 每个宽度为 1/12 (flex:1)，而 main 为 10/12 (flex:10)。

因此要使菜单与 main 对齐，菜单本身需要移动相同的量（这意味着它是 11/12ths [flex:11] 所以伪元素是只是 flex:1.

根据需要调整。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  min-height: 100%;
}
.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}
nav {
  display: flex;
}
nav:before {
  content: '';
  flex: 1;
  background: plum;
  /* for reference */
}
nav ul {
  display: flex;
  background: blue;
  list-style-type: none;
  flex: 11;
}
nav ul a {
  display: block;
  padding: 20px 20px 0 0;
  color: white;
  text-decoration: none;
}
.content {
  flex: 1;
  display: flex;
}
main {
  background: red;
  flex: 10;
}
aside {
  background: green;
  flex: 1;
}
footer {
  background: yellow;
}

<div class="wrapper">
  <header>
    <nav>
      <ul>
        <li><a href="#">Item 1</a>
        </li>
        <li><a href="#">Item 2</a>
        </li>
        <li><a href="#">Item 3</a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="content">
    <aside>Sidebar 1</aside>
    <main>Main Content Area</main>
    <aside>Sidebar 2</aside>
  </div>
  <footer>Footer</footer>
</div>

Codepen Demo

Flex-box 将导航项与侧边栏对齐

Flex-box align navigation items to sidebar

html

css

flexbox