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

html-css051

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:boxbox-flex是css3新添加的盒子模型属性，它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。具体详细情况我也说不清楚，不过在网上给你找了一篇关于这两个CSS盒子模型的详细介绍。你自己去看看吧http://www.easck.com/course/webdesign/2017/0405/104851.shtml

[toc]

默认子元素按行排列

Flexbox 布局是一维布局方式，要么按行排列，要么按列排列。

align-items 控制交叉轴， justify-content 控制主轴,始终不变。

flex-basis是用来设置 main size 的。使用 flex-basis，可以同时管理行模式下的宽度和列模式下的高度。

此时 width 失效，但是可以用 min-width 限制

在列模式下，设置高度

flex 容器在有剩余空间的时候，子元素占据剩余空间的占比。适合一些浮动的布局。

超过边界自动换行