CSS3中的弹性框布局Flexbox可以实现的效果有哪些?

html-css012

CSS3中的弹性框布局Flexbox可以实现的效果有哪些?,第1张

flex-box 弹性布局可以实现的效果：自适应布局，效果图如下：

代码如下：

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8">

 <title>flex box 弹性布局 </title>

 <meta name="Keywords" content="">

 <meta name="Description" content="">

 <style type="text/css">

html,body{height:100%margin:0}/*需要添加高度控制，否则无法撑满整个屏幕*/

body{

display:-webkit-box

-webkit-box-orient:vertical/*按照垂直方向上进行自适应处理*/

}

.content{-webkit-box-flex:1/*分配剩余的所有空间*/} .header{height:50pxmin-width:500px}/*顶部模块高度定死*/

.logo{width:100pxheight:50pxbackground:#99f}/*为区分模块，设置了背景色 logo部分固定宽高*/

.nav{height:50pxbackground:#ccc}/*nav模块不固定宽度*/

.content{min-height:100px}/*为防止之后的调整窗口大小是出现影响视觉效果的问题，特设置最小高度*/

.content,.header{display:-webkit-box/*为content,header部分也添加box的展示模式*/}

.nav{-webkit-box-flex:1}

.con2{-webkit-box-flex:1}

.con1{width:200pxbackground:#f99}/*固定宽度，高度不定*/

.con2{min-width:200pxbackground:#999}/*同上的min-height*/

.con3{width:100pxbackground:#9f9}/*固定宽度，高度不定*/

.footer{height:50pxmin-width:500pxbackground:#ccc}/*固定高度*/

 </style>

 <link href="" style="text/css" rel="stylesheet"/>

</head>

<body>

 <div class="header">

<div class="logo">logo部分，宽高固定</div>

<div class="nav">nav部分，高度固定，宽度自适应</div>

 </div>

 <div class="content">

<div class="con1">内容初始化第1模块</div>

<div class="con2">内容初始化第2模块</div>

<div class="con3">内容初始化第3模块</div>

 </div>

 <div class="footer">底部，宽度不定，高度固定</div>

</body>

</html>

简言之，display:box是09年制定的标准，而display:flex是12年的标准，这中间还经历过11年的display:flexbox，从目前来看，display:flex应该是最终标准了，各种浏览器的最新版本几乎都已实现了无前缀的支持。也就是说，display:box是旧的，display:flex是新的。如果你是开发手机界面，建议用display:flex，如果需要兼顾一些非常古老的机型，可再加上display:-webkit-box。实际使用中两者还是存在一些细微差别的，这里就不一一说明了。

在css中，我们可以使用flex去实现垂直居中，但是flex并不是一个很好的方法，现在很多浏览器并不支持flex，例如IE8,9。

首先我们要先给图片添加一个div，并且定义为宽度为100px，高度也是100px，并且给它定义一些基本的属性，其中我们把div中的display元素设置成flex，然后把另外一条添加align-items:center属性。

css代码：

body{background:#999}

.flexbox{width:300pxheight:250pxbackground:#fffdisplay:flexalign-items:center}

.flexboximg{width:100pxheight:100pxalign-items:center}

如果情况容许的话，可以用以下方法，兼容性更好：

body{background:#ccc}

.posdiv{width:300pxheight:250pxbackground:#fffposition:relativemargin:0auto}

.posdivimg{width:100pxposition:absolutetop:50%margin-top:-50px}