html - Flexbox布局-中心和100％Web应用程序

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center。
                            
                        
                    
                
                                6年前关闭。
            
                    
我正在开发一个Web应用程序。 HTMl / CSS对我来说从来不是一个大问题，除了为Internet Explorer优化网站外：)我已经完成了该应用程序的工作，其中只有一些“次要”的东西，我真的不知道该如何解决。这就是为什么我要您寻求帮助：

我认为可以使用新的flexbox来完成这两种布局（附加屏幕），但是我以前从未使用过，因此规格很多（2009、2011、2012…），所以我真的不知道该在哪里使用。开始。第一个问题只是一个普遍的问题：flexbox或HTML / CSS可能会同时存在这两种布局吗？




我试图描述尽可能多的内容，但不确定它是否足以理解该概念。随便问什么。两种布局或多或少都是相同的，所以我认为如果可能的话，另一种也应该可行。

有谁可以给​​我快速粗略的代码示例，如何编写这两种布局？对我自己（进入flexbox之类的东西）仅仅描述一下代码（评论之类的东西）会很棒。对我而言，至少有某种起点是非常有帮助的，因为目前我只是停留了几天。

提前致谢 ：）

最佳答案

这应该适用于您的第二个示例：http://jsfiddle.net/8rWwt/

我提供了非前缀版本，-ms-版本和现代的-webkit-版本。在此示例中，语法非常相似。这将足以支持仍在使用的大多数桌面版本的Chrome，Opera和IE10和11。Firefox使用即将发布的版本中未前缀的最新语法。当他们自动更新时，它也将很快全面运行。

我首先将body设置为flex容器，以便红色div可以居中，并告诉它在内联和块方向上都居中：

body {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;

    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

现在红色div居中。

接下来，我为红色div添加一个高度（否则将没有任何可扩展的内容，因为最高的高度将为其子代的高度），并将其设置为flex容器（绿色和蓝色div除非它们各自的高度，否则不会成为flex项parent是一个flex容器）。然后，我将项目的方向设置为“列”，以便它们彼此堆叠，而不是默认的行：

.red {
    background-color: red;
    height: 50%;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-direction: column;
    -webkit-flex-direction: column;
   flex-direction: column;
}

现在几乎准备就绪。最后需要做的是告诉蓝色div占用剩余空间：

.blue {
    background-color: blue;

    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

如果您希望它在当前/旧的Firefox和Safari中运行，则需要为旧的flexbox添加语法。 My article on Smashing Magazine在底部包括映射语法的表。

第一个示例只是第二个示例的简化版本。我删除了flexbox属性以使父对象居中，而将灰色div设置为100％高和100％宽。我还翻转了框的顺序，因为绿色框是第一个，应该可以弯曲：

http://jsfiddle.net/8rWwt/1/

关于html - Flexbox布局-中心和100％Web应用程序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16779505/