CSS3 box-flex 属性
2017-02-17 本文已影响0人
onlycj
[TOC]
流布局存在的问题
- 之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。
- flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。
提供的关于盒模型的几个属性：
box-orient 子元素排列 vertical or horizontal
box-flex 兄弟元素之间比例，仅作一个系数
box-align box 排列
box-direction box 方向
box-flex-group 以组为单位的流体系数
box-lines
box-ordinal-group 以组为单位的子元素排列方向
box-pack以下是关于flexible box的几个实例
几种布局方法
三列自适应布局，且有固定margin：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
.wrap { display: -webkit-box; -webkit-box-orient: horizontal; }
.child { min-height: 200px; border: 2px solid #666; -webkit-box-flex: 1; margin: 10px; font-size: 100px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; }
</style>
<div class="wrap">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
</body>
</html>
image
当一列定宽，其余两列分配不同比例亦可(三列布局，一列定宽，其余两列按1：2的比例自适应)：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
.wrap { display: -webkit-box; -webkit-box-orient: horizontal; }
.child { min-height: 200px; border: 2px solid #666; margin: 10px; font-size: 40px; font-weight: bold; font-family: Georgia; -webkit-box-align: center; }
.w200 { width: 200px }
.flex1 { -webkit-box-flex: 1 }
.flex2 { -webkit-box-flex: 2 }
</style>
<div class="wrap">
<div class="w200 child">200px</div>
<div class="flex1 child">比例1</div>
<div class="flex2 child">比例2</div>
</div>
</body>
</html>
image
下面是一个常见的web page 的基本布局：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<style>
header, footer, section { border: 10px solid #333; font-family: Georgia; font-size: 40px; text-align: center; margin: 10px; }
#doc { width: 80%; min-width: 600px; height: 100%; display: -webkit-box; -webkit-box-orient: vertical; margin: 0 auto; }
header, footer { min-height: 100px; -webkit-box-flex: 1; }
#content { min-height: 400px; display: -webkit-box; -webkit-box-orient: horizontal; }
.w200 { width: 200px }
.flex1 { -webkit-box-flex: 1 }
.flex2 { -webkit-box-flex: 2 }
.flex3 { -webkit-box-flex: 3 }
</style>
<div id="doc">
<header>Header</header>
<div id="content">
<section class="w200">定宽200</section>
<section class="flex1">比例3</section>
<section class="flex2">比例1</section>
</div>
<footer>Footer</footer>
</div>
</body>
</html>
image
