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

html-css010

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>

1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

2.float浮动布局，absolute绝对定位，flex弹性盒子，table表格布局，grid网格布局 / 栅格化布局

3.移动端布局：流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,

css设计模式

OOCSS——Object Oriented CSS

SMACSS——Scalable and Modular Architecture for CSS

垂直水平均分：

子元素纵向等距排列：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。