将 Flexbox 推离画布答案

【问题标题】：Push Flexbox Off Canvas将 Flexbox 推离画布
【发布时间】：2013-08-04 01:30:16
【问题描述】：

当达到 60em 的最大宽度时，你们能否帮我弄清楚如何将 flex 列从画布上推出（基本上是负边距或负 3dtranslate），这将导致原始 flex4 内容容器占满整个窗户？

我使用的一般 html 标记是：

<body>
    <aside>
        Stuff
    </aside>
    <section class="content">
        Stuff
    </section>
</body>

我真诚地感谢任何帮助，我真的一直在为此绞尽脑汁。我的最终目标是在较小的分辨率下将侧面用作来自画布外的导航栏。

【问题讨论】：

最大宽度60em表示哪个元素的宽度？
就在身体上，本质上就是这样。 @media(max-width: 60em){将一边从画布上推开} 然后@media(max-width: 60em){让内容（更大）模块占据整个宽度}
为什么 display:none 不起作用，您希望内容在未显示时仍然可以访问吗？
如果该部分具有flex 属性，则该部分将扩展以覆盖整个宽度
我明白了，这很可能正是我所需要的。当我激活 display flex 时，我还能从左边动画它吗？我想要的基本上是这种效果：codepen.io/banunn/full/KBtnD with Flexbox

标签： css layout navigation flexbox

【解决方案1】：

当小于 60em 时，您可以使用媒体查询将display: none 放在一边：http://jsfiddle.net/3CZFx/ 当它被隐藏时，屏幕阅读器等将看不到侧面。一个可访问的解决方案是使用 position: absolute; http://jsfiddle.net/3CZFx/1/

编辑：或者这就是你想要的http://jsfiddle.net/3CZFx/2/

【讨论】：

太完美了！（新小提琴）。那么有没有办法让他们都在 flexbox 中？我只是喜欢 flex 如何将“aside”和“section”元素保持在浏览器的整个高度。不管怎样，我会接受的！
它们都是弹性盒子并且是.container的全高。侧面只是固定宽度。
完美运行！谢谢你。我不敢相信我自己没有做到这一点。只是有点过于复杂了。