Yesterday I got a website in the school which uses the CSS 3 flexbox statement. I never used that before. So I googled it a bit and found a lot of different styles of the flexbox statements.

有些人写display: box;,有些人用display: flexbox;,另一些人写display: flex;.

那么有什么区别呢?我应该用哪个?

推荐答案

These are different styles.
display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

Quote of Paul Irish

警告:Flexbox已经进行了一些重大修改,因此本文 已经过时了.总而言之,这old standard (Flexbox 2009)个, 本文是基于Chrome v4、Firefox之后实现的 从v2和IE10测试版开始.

从那时起,the new flexbox standard debuted,并开始出道在 chromium 17.斯蒂芬·海伊有written a guide on the new flexbox implementation分.从那时起,规范经历了命名更改, 开始登陆Chrome 21.Chrome22有一个稳定的实现 最新的规格.

在这一点上,实现任一has its risks,所以要注意.

Here is the blog about the different flexbox statements.
This is a blog entry by css-tricks about the different versions.

当我使用FlexBox时,我总是这样写的:

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

编辑:
不过,并不是每个人都有能够查看FlexBox布局的浏览器/设备.因此,对于后备解决方案或替代方案,凯南·优素福(Kenan Yusuf)写了this article篇关于如何入门的文章.

Css相关问答推荐

要创建其按钮垂直对齐而不是水平对齐的v-bTN-toggle

臭虫?嵌套的css供应商前缀中断Chrome css解析

基于高度的容器查询不起作用

悬停时如何更改 navbarPage 链接的文本 colored颜色 (在shiny 的应用程序中)?

如何使用 ReactJS 使用 CSS 设置 map 容器的样式

Tailwind css 和 Next.js 导航组件 z-index 不工作

问题定位位置:Tailwindcss 中的绝对元素

每当键盘在react native 中打开时,如何使用 KeyboardAvoidingView 删除图像?

semantic-ui-react 使输入使用全宽度可用

如何在真实文本旁边制作文本阴影,使其看起来像 css 中的重复文本?

内部和外部 div 之间的像素大小的间隙

在表格中隐藏绝对伪元素

你能用 JavaScript 控制 GIF 动画吗?

悬停时如何在图像上显示文字?

CSS3 box-shadow:inset 可以只做一侧或两侧吗?喜欢边界顶部?

我应该如何组织我的 CSS 文件的内容?

单选按钮和标签显示在同一行

弹性框中的边距折叠

为什么 height:0 不隐藏我的填充

CSS3 过渡:过渡:全部是否比过渡:x慢?