CSS Flexbox - justify-content: flex-end 和隐藏的侧边栏答案

【问题标题】：CSS Flexbox - justify-content: flex-end and hidden sidebarCSS Flexbox - justify-content: flex-end 和隐藏的侧边栏
【发布时间】：2015-12-13 16:48:36
【问题描述】：

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

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

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

如果我使用会出现问题：

justify-content: flex-end

如果我忽略它，按钮会按原样消失。

这是一个简单的代码笔：

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

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

提前致谢！

【问题讨论】：

标签： css flexbox

【解决方案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;
}

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

【讨论】：

谢谢，我正在使用第二种方法，效果很好，看起来比使用宽度更逼真。我已经相应地更新了代码笔。