CSS3 Flex

Flex

Flex 是一种针对多屏幕而生的布局方式，相对于传统的 浮动布局 、 定位布局，FLex 布局的兼容性和灵活度更高、更加适合开发移动端应用。

空间分割

<style type="text/css">

/** display: flex 把容器设置成一个 “FLex盒子” **/

#body {
 display: flex; 
 width: 300px;
 height: 400px;
 color: #f0f0f0;
}

/** flex-grow 把空间比例分割成 1 / 3 / 1 三分 **/

#header {
 background: #333366; 
 flex-grow:1;
}

#main {
 background: #ff5f5f; 
 flex-grow:2;
}

#footer {
 background: #f9e75e; 
 flex-grow:1;
}
</style>

<div id="body">
 <div id="header"></div>
 <div id="main"></div>
 <div id="footer"></div>
</div>

效果

方向调整

<style type="text/css">

/** flex-direction: column; 元素显示方向调整，默认 row  **/

#body {
 display: flex;
 flex-direction: column;
 width: 300px;
 height: 400px;
}

#header {
 background: #333366; 
 flex-grow:1;
}

#main {
 background: #ff5f5f; 
 flex-grow:2;
}

#footer {
 background: #f9e75e; 
 flex-grow:1;
}
</style>

<div id="body">
 <div id="header"></div>
 <div id="main"></div>
 <div id="footer"></div>
</div>

效果

位置对齐

<style type="text/css">

#body {
 display: flex;
 flex-direction: column;
 width: 300px;
 height: 400px;
}

#header {
 background: #333366; 
 flex-grow:1;
}

#main {
 background: #ff5f5f; 
 flex-grow:2;

 display: flex; /** 把容器设置成 “Flex盒子”才能对下面元素使用 Flex布局属性 **/
 justify-content: center; /** 水平对齐 | justify-content: flex-start 左 / center 中 / flex-end 右 **/
 align-items: center; /** 垂直对齐 | align-items: flex-start 上 / center 中 / flex-end 下 **/

}

#footer {
 background: #f9e75e; 
 flex-grow:1;
}
</style>

<div id="body">
 <div id="header"></div>
 <div id="main" style="color: #f0f0f0;"> JMJC.TECH </div>
 <div id="footer"></div>
</div>

效果

FLex 盒子嵌套 Flex 盒子，再通过简单的 空间、方向、位置 三种组合，就搭建起整个复杂的显示框架。