CSS3 Flexbox：显示：box与flexbox vs. flex
我昨天成为学校使用css3 flexbox声明的网站。 我以前从未使用过。 所以我谷歌了一下。 并发现了很多不同风格的Flexbox语句。
有些人写的display: box; ，一些使用display: flexbox; 和其他display: flex; 。
那么什么是不同的？ 我应该用哪个？
这些是不同的风格。
display: box; 是2009年的一个版本。
display: flexbox; 是2011年的一个版本。
display: flex; 是实际的版本。
保罗爱尔兰的报价
警告：Flexbox已经过一些重大修改，因此本文已过时。 总之，本文所基于的旧标准（Flexbox 2009）自v4开始在Chrome中实施，v2以后的Firefox和IE10 beta。
从那时起，新的Flexbox标准在Chrome 17上首次亮相并开始亮相。Stephan Hay撰写了关于新Flexbox实施的指南。 从那时起，该规范经历了从Chrome 21开始着陆的命名更改。Chrome 22稳定地实现了最新的规范。
此时，实施要么有风险，要注意。
以下是有关不同Flexbox语句的博客。
这是一篇关于不同版本的css-tricks博客文章。
当我使用flexbox时，我总是这样写：
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
编辑：
仍然不是每个人都有浏览器/设备能够查看flexbox布局。 因此，对于后备解决方案或备选方案，Kenan Yusuf撰写了关于如何在不使用Flexbox的情况下使用Flexbox的文章。
该规范经历了许多次迭代，参见2009年，2012年和2013年，每次价值发生变化。 display: flex; 是最新的。
它仍然是一个规范草案，因此任何当前的实现可能仍会改变。
灵活的盒子或flexbox是CSS3中的一种新布局模式
当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，使用flexbox可确保元素的行为可预测
对于许多应用来说，柔性盒模型提供了对块模型的改进，因为它不使用浮动，柔性容器的边距也不会随其内容的边距而折叠
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>
输出：
链接地址: http://www.djcxy.com/p/13183.html