嵌套flexbox优化 [英] nested flexbox optimization

问题描述

我只是想了解flexbox，我想了解它的工作原理。我必须构建一个仪表板，它具有视口（没有滚动条）的宽度和高度，固定高度标题，固定高度页脚和自动完成高度内容。内容由具有固定宽度的菜单和具有自动完成宽度和高度的预览组成;

I'm just learning about flexbox, and I'm trying to understand how it works. I have to build a dashboard that has the width and height of the viewport ( no scroll-bar) , a fixed height header, a fixed height footer, and an auto complete height content. The content is composed from a menu with a fixed width, and a preview with an auto complete width and height;

我认为这只能使用嵌套的flexbox此示例： http://jsfiddle.net/03qLy6zL/9/

I think this can be done only with nested flexbox like in this example: http://jsfiddle.net/03qLy6zL/9/

html

<div class="header">

</div>

<div class="content">
    <div class="menu"></div>
    <div class="preview"></div>
</div>

<div class="footer">
    footer
</div>

css

html,body {
    height: 100%;
    margin:0px;
    padding:0px;
}


body{
    display:flex;
    flex-direction:column;
}

body > * {
    flex-shrink: 0;
}


.header{
    background-color: yellow;
    height:50px;
}

.content{
    flex-grow: 1;
    display:flex;
    flex-direction:row;
}

.menu{
    background-color: tomato;
    width:300px;
    flex-grow: 0;
}

.preview{
    background-color: lightgreen;
    flex-grow: 1;
}

.footer{
    height:50px;
    background-color:lightblue;
}

这是构建这个的最好方法，弹盒？
感谢

Is this the best way to build this, or it can be done without nested flex boxes? Thanks

推荐答案

只使用flexbox？是的，这可能是唯一的方法。如果你想把flexbox和其他方法结合起来，那么很多其他的选项都会打开。

Using just flexbox? Yes, that is probably the only way. If you want to combine flexbox with other methods then a whole lot of other options open up.

有很多粘性页脚解决方案可以使用静态页脚和页眉。每个都有自己的优点和缺点。这里有五个纯CSS版本： 1 - 3 ， 4& 5 （还有更多，但这会让你开始）。他们不同于额外的标记，没有额外的标记，没有那么大的支持，什么事情发生，但它的工作，所以它必须是魔术！使用任何这些（不包括5（您已经使用的flexbox方法）将使它不再需要嵌套flexbox。

There are a ton of sticky footer solutions that work with static footers and headers. Each has their own pros and cons. Here's five pure css versions: 1 - 3, 4 & 5 (there are many more, but that would get you started). They vary from extra markup witht great support to no extra markup with not as great support to, "what the heck is going on but it works, so it must be magic!". Using any of these (not including 5 (the flexbox method - which you already using) would make it so that you no longer have to nest flexbox.

或者你可以去另一个路由，并使您的内部内容使用不同的方法。您可以使用浮动（可能需要 clearfix ），内联-block（它有自己的问题）。

Or you could go the other route and make your internal content use a different method. You could use floats (which could require a clearfix), inline-block (which has it's own issues).

或，因为你不担心内容使你的页面滚动有几个选项：你可以使用固定的定位在页眉和页脚（虽然结果将类似于使用粘性页脚）您也可以使用视口单位。

Or, since you aren't worried about content making your page scroll there's a few more options: You could use fixed positioning on the header and footer (though the results would be similar to using a sticky footer). You could also use viewport units.

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
body {
  display: flex;
  flex-wrap: wrap;
}
body > * {
  flex-shrink: 0;
}
.header {
  background-color: yellow;
  height: 10vh;
  width: 100%;
}
.menu {
  background-color: tomato;
  width: 300px;
}
.preview {
  background-color: lightgreen;
  flex-grow: 1;
}
.preview,
.menu {
  height: 80vh;
}
.footer {
  height: 10vh;
  background-color: lightblue;
  width: 100%;
}

<div class="header">header</div>
<div class="menu"></div>
<div class="preview"></div>
<div class="footer">footer</div>

试图理解flexbox，这些都没有可能有帮助。但是如果仪表板是最终结果，并且你不喜欢flexbox的做法（我认为这是一个奇妙的解决方案，它甚至有完美的语义感，特别是与HTML5标签名称结合），那么有几个更多选项。

All of that aside, since you said you were trying to understand flexbox, none of this probably helps. But if the dashboard is the end result and you don't like the way flexbox is making you do it (I think it's a wonderful solution. It even makes perfect semantic sense, espesially combined with HTML5 tag names.), then there's a few more options.

这篇关于嵌套flexbox优化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！