Question

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

这是我正在使用的当前代码

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

Answer 1

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

水平布局都是flexbox。

根据原始代码，aside各为1/12宽（flex:1），而main为10/12（flex:10）。

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

根据需要进行调整。

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

Codepen Demo

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

1 个答案: