CSS3 Flexbox: display: box vs. flexbox vs. flex
I became yesterday a website in the school which use the css3 flexbox statement. I never used that before. So i google it a bit. And found a lot of different styles of the flexbox statements.
Some guys write display: box; , some use display: flexbox; and other display: flex; .
So what are the differents? Which i should use?
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
Warning: Flexbox has undergone some major revisions, so this article is out of date. In summary, the old standard (Flexbox 2009), which this article is based on, was implemented in Chrome since v4, Firefox since v2, and IE10 beta.
Since then, the new flexbox standard debuted and started to debut in Chrome 17. Stephan Hay has written a guide on the new flexbox implementation. Since then, the spec underwent naming changes which started landing in Chrome 21. Chrome 22 has a stable implementation of the latest spec.
At this point, implementing either has its risks, so be aware.
Here is the blog about the different flexbox statements.
This is a blog entry by css-tricks about the different versions.
When i use flexbox, i always write it like that:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Edit:
Still not everyone has a browser/device capable of viewing flexbox layouts. So for fallback solutions or alternatives there is this article by Kenan Yusuf on how to use flexbox without using flexbox.
The specification has been through many iterations, see 2009, 2012, 2013 and each time the value was changed. display: flex; is the latest.
It is still a draft specification so any current implementation may still change.
Flexible boxes, or flexbox, is a new layout mode in CSS3
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices
For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents
<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>
Output :
链接地址: http://www.djcxy.com/p/13184.html上一篇: 将CSS显示属性重置为默认值