Question

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

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

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

如果我使用的话会出现问题：

justify-content: flex-end

如果我把它留下来，那些按钮会按照它们的预期消失。

这是一个简单的codepen：

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

不要重复元素上已存在的属性;）

CSS Flexbox - 对齐内容：flex-end和隐藏侧边栏

1 个答案: