CSS3 Flexbox：显示：框与flexbox与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布局。 因此，对于备用解决scheme或备选scheme，Kenan Yusuf 撰写了关于如何在不使用Flexbox的情况下使用Flexbox的文章 。
该规范经历了许多次迭代，见2009年 ， 2012 年和2013年 ，每次价值发生变化。 display: flex; 是最新的。
这仍然是一个规范草案，所以目前的实施可能仍然会改变。
显示：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>
输出：
