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>

效果

JMJC.TECH

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

CSS3 教程 CSS3 入门 CSS3 选择器 CSS3 颜色 CSS3 单位 CSS3 字体 CSS3 文本 CSS3 光标 CSS3 盒子模型 CSS3 边框 CSS3 边距 CSS3 列表 CSS3 表格 CSS3 背景 CSS3 效果 CSS3 浮动 CSS3 定位 CSS3 响应式 CSS3 Columns CSS3 Flex