-1

我现在正在开发一个网络应用程序。HTMl / CSS 对我来说从来都不是什么大问题，除了为 Internet Explorer 优化网站 :) 我已经完成了这个应用程序，只有一些“次要”的东西，我真的不知道如何解决。这就是我向您寻求帮助的原因：

我认为这两种布局（附加屏幕）可以通过使用新的 flexbox 来完成，但我以前从未使用过它，并且有很多不同的规格（2009、2011、2012 ......），所以我真的不知道在哪里开始。第一个问题只是一个笼统的问题：这两种布局通常可以使用 flexbox 或 HTML / CSS 吗？

布局 1 布局 2

我试图尽可能多地描述，不确定它是否足以理解这个概念。随便问什么。两种布局或多或少相同，所以我认为如果一种可能，另一种也应该以某种方式可行。

有没有人可以给我一个快速粗略的代码示例，如何对这两种布局进行编程？对我自己（进入这个 flexbox 的东西）来说，稍微描述一下代码（评论或其他东西）会很棒。对我来说，至少有某种起点真的很有帮助，因为目前我只是被困了好几天。

提前致谢 ：）

4

2 回答 2

2

是的你可以！这是一个大教程

你的第一个愿望：

现场示例

HTML 

<div class="parent">
    <div class="purple">
    </div>
    <div class="green">
        big<br>
        test<br>
        content<br>
        very<br>
        big<br>
    </div>
</div>

CSS

html，正文{
  高度：100%；
}

.父{
  显示：-webkit-box；/* OLD：Safari、iOS、Android 浏览器、较旧的 WebKit 浏览器。*/
  显示：-moz-box；/* 旧：Firefox（有缺陷的）*/
  显示：-ms-flexbox；/* 中：IE 10 */
  显示：-webkit-flex；/* 新，Chrome 21+ */
  显示：弯曲；/* 新：Opera 12.1、Firefox 22+ */

  -webkit-flex-flow：列；
  -moz-flex-flow：列；
  -ms-flex-flow：列；
  -o-flex-flow：列；
  弹性流：列；
  高度：100%；
}
。紫色的{
  显示：-webkit-box；显示：-moz-box；
  显示：-ms-flexbox；
  显示：-webkit-flex；
  显示：弯曲；

  -moz-box-flex：自动；
  -webkit-box-flex：自动；
  -webkit-flex：自动；
  -ms-flex：自动；
  弹性：自动；
  背景：紫色；
}
。绿色 {
  显示：-webkit-box；显示：-moz-box；
  显示：-ms-flexbox；
  显示：-webkit-flex；
   显示：弯曲；

  弹性方向：列；
  背景：绿色；
}
于 2013-05-27T19:43:30.420 回答
1

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

我已经包含了非前缀版本、-ms- 版本和现代 -webkit- 版本。此示例中的语法非常相似。这足以支持大多数仍在使用的桌面版本的 Chrome、Opera 以及 IE10 和 11。Firefox 在即将发布的版本中使用不带前缀的最新语法。当它们自动更新时，它也将很快在那里全面工作。

我首先使 body 成为一个 flex 容器，以便红色 div 可以居中，并告诉它在 inline 和 block 方向上居中：

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 是一个弹性容器）。然后我将项目的方向设置为列，因此它们彼此堆叠，而不是默认的行：

.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 添加语法。我在 Smashing Magazine 上的文章在底部包含表格，映射了语法。

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

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

于 2013-05-27T20:50:18.670 回答