display: flex布局

Posted chaishengblog

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display: flex布局相关的知识,希望对你有一定的参考价值。

display: flex; 是一个 CSS 属性,用于设置元素的布局模式。该属性可以将一个元素的子元素排列为一条线,并通过一些属性来指定排列方向、对齐方式、间距等。

具体地说,使用 display: flex; 可以让一个元素成为 flex 容器,它的子元素就会成为 flex 项,参与到 flex 布局中。

例如,考虑以下 HTML 结构:

html
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
如果我们在 .container 上添加样式 display: flex;,那么三个子元素都会被排列为一条线。此时,我们可以使用 justify-content 和 align-items 等属性来分别设置水平和垂直方向上的对齐方式。

例如,我们可以使用以下样式将子元素在水平方向居中,垂直方向顶部对齐:

css
.container 
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直顶部对齐 */

display:flex和display:box布局浏览器兼容性分析

display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀;display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。

1.关于display:flex

对于响应式布局,使用flex很方便,但是它的兼容性也是一个值得考虑的问题。

<div class="container">
        <div class="item" style="background:#f00"></div>
        <div class="item" style="background:#000"></div>
        <div class="item" style="background:#08c"></div>
        <div class="item" style="background:#a00"></div>
        <div class="item" style="background:#0f0"></div>
    </div>
.container{
		display:flex;
		flex-flow:row nowrap;
		justify-content:space-between;
		align-items:center;
		margin:0 auto;
		width:100%;
		height:200px;
		background:#eee;
	}
	.item{flex:1;height:200px;}

  

对于PC端,一般chrome(测试版本:49.0.2623.110 m)和火狐(测试版本:49.0.2)都能很好地支持。ie不支持,显示的是顺序排列下来的宽度100%的模块。

对于移动端:

(1)上述代码iOS的原生safari浏览器是支持的;UC浏览器支持的很好;微信浏览器不支持(测试机型:苹果4s)

(2)安卓的原生浏览器不支持,能够正常显示模块,文档流依次排列;UC浏览器不支持,显示为空白;微信浏览器不支持(测试机型:华为荣耀6 Plus,Android4.4.2)

2.关于display:box

<div class="container">
		<div class="item item1" style="background:#f00"></div>
		<div class="item item2" style="background:#000"></div>
		<div class="item item3" style="background:#08c"></div>
	</div>
.container{
		display:-moz-box;
		display:-webkit-box;
		display:box;
		width:100%;
		height:200px;
	}
.item{height:200px;}
.item1{-moz-box-flex:1;-webkit-box-flex:1;box-flex:1;}
.item2{-moz-box-flex:2;-webkit-box-flex:2;box-flex:2;}
.item3{-moz-box-flex:3;-webkit-box-flex:3;box-flex:3;}

PC端:chrome(测试版本:49.0.2623.110 m)和火狐(测试版本:49.0.2)都能很好地支持。ie不支持,显示的是顺序排列下来的宽度100%的模块。

移动端:

(1)上述代码iOS的原生safari浏览器是支持的;UC浏览器支持的很好(测试机型:苹果4s)

(2)安卓的原生浏览器支持;UC浏览器不支持,显示为空白(测试机型:华为荣耀6 Plus:Android4.4.2)

 UC浏览器是支持display:box;在我的手机上之所以没显示,排查了一下原因,是因为页面缺少meta,<meta name="viewport" content="width=device-width" />加上之后就可以正常显示了。具体是为什么只有我的手机上非要加meta,我也不清楚--_--

总的来说,不考虑IE浏览器的话,PC端上使用哪个都可以,一般使用display:flex;移动端的安卓的UC只支持display:box,iOS的UCdisplay:box和display:flex两个都支持。

3.兼容浏览器的写法

.container{ 
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ 
display: -moz-box; /* Firefox 17- */ 
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ 
display: -moz-flex; /* Firefox 18+ */ 
display: -ms-flexbox; /* IE 10 */ 
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

  

  

以上是关于display: flex布局的主要内容,如果未能解决你的问题,请参考以下文章

display:flex弹性布局

display:flex和display:box布局浏览器兼容性分析

display:flex和display:box布局浏览器兼容性分析

flex布局

display: flex布局

布局神器display:flex