CSS Flexbox - 调整内容 : flex-end and hidden sidebar

Question

我有一个关于 flexbox 的简单问题。

我有一个可以用按钮切换的侧边栏。如果切换将其设置为可见，则它会从右侧滑入。 (宽度 0 --> 宽度 400)。

问题是一些通过“justify-content: flex-end”向右对齐的按钮在右侧仍然可见，即使“容器”(边栏)的宽度为零。

如果我使用会出现问题:

justify-content: flex-end

如果我忽略它，按钮会按预期消失。

这是一个简单的代码笔:

http://codepen.io/anon/pen/zvqroJ

我不想“四处乱砍”让这些按钮消失，所以我想知道我是否做错了什么，以及是否可以使用纯 flexbox 解决方案来解决这种常见情况。

提前致谢!

Answer 1

因为 justify-content: flex-end 强制元素大小。您可以通过两种方式修复它:

第一种方法:在你的.sidebar中添加overflow: hidden

.sidebar {
  overflow: hidden;
  border: 1px dashed red;
  -webkit-flex-direction: column;
  flex-direction: column;
  position: fixed;
  z-index: 4;
  top: 0px;
  right: 0px;
  width: 400px;
  height:100%;
  transition: all 4s ease;
}

第二种方法:在 .hidden 中，像在 .sidebar 中一样设置宽度(在你的例子中是 400px)，并像宽度大小一样设置正确的位置，但为负数，所以 -400px

.hidden {
  -webkit-flex-direction: column;
  flex-direction: column;
  position: fixed;
  z-index: 4;
  top: 0px;
  right: -400px;
  width: 400px;
  height: 100%;
  transition: all 4s ease;
}

第二种方法更好，因为你在移动元素时没有压缩他的宽度和他的子元素

---

一个小技巧

您可以只使用一个属性来清理您的 .hidden 类，方法如下:

.hidden {
  right: -400px;
}

不要重复元素上已经存在的属性；)