关于CSS3中FlexBox的浅谈

刺骨的言语ヽ痛彻心扉 2022-09-19 14:27 147阅读 0赞

HTML5与CSS3现在已慢慢的被各主流浏览器所支持，在新版本的浏览器中，新标准得到了很好的支持，但是在早先的版本中，由于各浏览器的内核和厂家不同，对于其支持的话就有一些差异，实现起来的话就比较费劲。本篇就来说说CSS3中的[CSS Flexible Box Layout][]布局，其中出现不当之处，还望指正，献丑了。

首先，来看看个浏览器对起的支持情况：

![图1][1]

此信息来源于[http://fmbip.com/litmus/][http_fmbip.com_litmus]，这个表在列出的都是先前的版本对于CSS3的支持情况，在IE11、Chrome30、FireFox26.0等等中，对FlexBox的支持做了很好的决定，在其官方文当中就可以看出，明确表示支持。

微软在这篇文当中说明[http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx][http_msdn.microsoft.com_en-us_library_ie_dn265027_v_vs.85_.aspx]，IE11将简化FlexBox的使用，写法为： display： flex；其他浏览器也会如此。

这个地址[http://www.css3.info/modules/][http_www.css3.info_modules]列举了CSS3中的CSS3 Module Status，其中列出各个Module的状态，大家可以自己查看。

写这篇文章的原因就是我在使用FlexBox的时候，出现了一些问题，让我纠结，弄了一下午和一晚上，最终给找到了答案，因此，我想写这篇文章，写给那些不会使用和使用出问题的朋友们，希望能帮助到你们，刚刚接触，还望不吝赐教。

我偶然的机会，在一本书上看到了CSS3中出现的一个新的布局格式，那就是盒布局，但是不凑巧的是，IE对盒布局不支持，在w3cschool的帮助文档中也看到，display：box； IE不支持，只有在chrome和FireFox等其他浏览器支持。很遗憾，网上查找资料后，发现一片文章中说道：如果看见display：box ，那就说明这是以前的写法，如果是写flexbox或是\-ms-flexbox，那也是以前的写法，而现在的写法是：display：flex；，在查阅文档中也发现，现在新版本浏览器都支持flex。

测试环境：win7，IE10、chrome30.0、FireFox26.0、Opera12.6

在IE10中的写法如下：

.content{
          display: -ms-flexbox;
    }

在IE11等新版本中的写法是 display：flex；而且旧版本中的关于Flexbox的属性名称有所改变，如flex-pack、flex-align等等，就是这个原因，才导致我花费大量的时间，没有搞清楚，在IE下好好的，却在chrome和firefox中没有被支持，再说了，都已经到了最新版本了，没有理由对于这些新特新不支持啊，最后纠结了半天，发现旧的属性已不再被使用了。

看看变化吧：

![图2][2]

![图3][3]

Finally, the following additions have been made:

*  The [**flex**][flex] property has been added as a shorthand property for the [**flex-grow**][flex-grow], [**flex-shrink**][flex-shrink], and [**flex-basis**][flex-basis] properties.
 *  The [**align-content**][align-content] and [**justify-content**][justify-content] properties now support "space-around" and "space-between" values.
 *  The default flex behavior of flex items has changed. In Internet Explorer 10, flex items that didn't fit their containers overflowed the margins of the container or clipped to the margins of the container. Starting with IE11, these items now shrink to fit their containers (up to the [**min-width**][min-width] value, if specified). Use the [**flex-shrink**][flex-shrink] property to change this behavior.

这些都清楚的显示了属性的变化情况。

下面将写点例子来简单的示范一下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>FlexBox TEST</title>
    <style type="text/css">
    	body{
    		margin: 0;
    		padding: 0;
    	}
    	#container{
    	/* -ms- 前缀的是为了兼容IE10 */
    		display: flex;
    		display: -ms-flexbox;
    		
    		flex-direction: row;
    		-ms-flex-direction: row;
    		
    		background: #44f032;
    		height: 200px;
    		width: 500px;
    	}
    	#container > div{
    		height: 100px;
    		width: 100px;
    		border: 1px solid #333;
    		margin: 5px;
    		
    		display: flex;
    		display: -ms-flexbox;
    		
    		/*文字居中*/
    		justify-content : center;
    		-ms-flex-pack: center;
    			
    		align-items: center;
    		-ms-flex-align: center;
    		
    	}
    </style>
    </head>
    <body>
    <div id="container">
    	<div>box1</div>
    	<div>box2</div>
    	<div>box3</div>
    	<div>box4</div>
    </div>
    </body>
    </html>

效果图：

![图4][4]

以上效果在测试浏览器中效果一样。

关于其他的属性和用法，可以自行研究或查看其他的资料，以后有时间的话，再深入探讨。

##  ##

[CSS Flexible Box Layout]: http://www.w3.org/TR/css3-flexbox/
[1]: /images/20220828/fa6468969c1943589a5aa9f5f84c808b.png
[http_fmbip.com_litmus]: http://fmbip.com/litmus/
[http_msdn.microsoft.com_en-us_library_ie_dn265027_v_vs.85_.aspx]: http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx
[http_www.css3.info_modules]: http://www.css3.info/modules/
[2]: /images/20220828/e742275c39db49318ae063e2489c0b85.png
[3]: /images/20220828/0833e50208c44b29806e96ab7edeecfe.png
[flex]: http://msdn.microsoft.com/en-us/library/ie/jj127297%28v=vs.85%29.aspx
[flex-grow]: http://msdn.microsoft.com/en-us/library/ie/dn254947%28v=vs.85%29.aspx
[flex-shrink]: http://msdn.microsoft.com/en-us/library/ie/dn254948%28v=vs.85%29.aspx
[flex-basis]: http://msdn.microsoft.com/en-us/library/ie/dn254946%28v=vs.85%29.aspx
[align-content]: http://msdn.microsoft.com/en-us/library/ie/jj127302%28v=vs.85%29.aspx
[justify-content]: http://msdn.microsoft.com/en-us/library/ie/jj127304%28v=vs.85%29.aspx
[min-width]: http://msdn.microsoft.com/en-us/library/ie/ms530820%28v=vs.85%29.aspx
[4]: /images/20220828/2bdd4b612a704bebb7d6ee2d60776983.png