2013-08-02 31 views
-1

你们和gals能帮我弄清楚,如果达到60em的最大宽度时,我可能会将flex列从画布上移开(基本上是负边距或负3dtranslate),这将导致原始flex4内容容器占满了整个窗口?推动Flexbox关帆布

我使用一般的HTML标记是:

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

我衷心感谢所有帮助,我真的伤透了在这一个我的大脑。我的最终目标是在较小的分辨率下使用旁边作为来自画布外的导航栏。

Starting Desktop View

End Result

+0

60em意味着该元素的宽度的最大宽度? –

+0

就在身体上,所以基本上。 @media(max-width:60em){推下画布}然后@media(max-width:60em){允许Content(大)模块占据整个宽度} – Brock

+0

为什么display:none不工作,您是否希望内容在未显示时仍可访问? –

回答

0

你可以使用媒体查询来设置display: none在一旁当超过60em小:http://jsfiddle.net/3CZFx/ 旁白不会当它被隐藏与此是屏幕阅读器等可见。可访问的解决办法是使用position: absolute;http://jsfiddle.net/3CZFx/1/

编辑:或者是这种更你要什么http://jsfiddle.net/3CZFx/2/

+0

这是完美的! (新的小提琴)。那么他们没有办法兼顾Flexbox?我只是喜欢flex如何将“旁边”和“部分”元素保持在浏览器的整个高度。无论如何,我会接受它! – Brock

+0

它们都是flexbox,并且是'.container'的全部高度。旁边只是固定的宽度。 –

+0

完美的作品!谢谢。我不敢相信我自己没有做到这一点。有点过分复杂。 – Brock