本章主要介绍常见的布局实现，包括：
[1] 两列布局
[2] 三列布局
[3] 弹性 (Flex) 布局
[1] 两列布局
- 子列固定宽度（设置
absolute、float），主列自适应屏幕（调整margin）。 - 有
absolute + margin、float + margin、float + 负margin等方式。
<!DOCTYPE html>
<html>
<head>
<title>两列布局</title>
<meta charset="utf-8">
<style type="text/css">
/* 方法1: absolute + margin 方式 */
/* 优点: 可以优先渲染主元素 main 中的内容*/
/* 缺点: aside 列脱离了文档流, 当 aside 列比 main 列高时会覆盖后面的布局 */
.container1 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.aside1 {
position: absolute;
top: 0; /* 优先渲染 main 中内容时不可以省略，因为 main1 中的 margin-left 占据了 200px 的大小 */
left: 0;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main1 {
height: 100px;
margin-left: 200px; /* 左侧 200px 被侧边栏覆盖 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法2: float + margin 方式 */
/* 优点和缺点与方法 1 前者相反 */
.container2 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.aside2 {
float: left;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main2 {
height: 100px;
margin-left: 200px; /* 左侧 200px 被侧边栏覆盖 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法3: float + 负margin 方式 (即双飞翼布局) */
/* 浮动 container 和 aside 列, 通过 负margin 正确定位 aside 列
* container 宽度值设为 100%
* main 列的 margin-left 消除被 aside 覆盖的部分
* aside 不包括在 container 中
*/
/* 优点: 解决了 float + margin 不能优先渲染 main 中的内容 */
.container3 {
float: left; /* 浮动 */
width: 100%;
border: 1px solid #000;
}
.aside3 {
float: left;
margin-left: -100%; /* 调整到合适位置 */
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main3 {
height: 100px;
margin-left: 200px; /* 左侧 200px 被侧边栏覆盖 */
background-color: rgba(0, 255, 0, .5);
}
</style>
</head>
<body>
<!-- 能优先渲染 main -->
<div class="container1">
<div class="main1">主列</div> <!-- 如果想要交换两列, 需要将 .aside1 中的 left 改成 right, .main1 中的 margin-left 改成 margin-right -->
<div class="aside1">子列</div>
</div>
<!-- 不能优先渲染 main -->
<div class="container2">
<div class="aside2">子列</div>
<div class="main2">主列</div> <!-- 如果想要交换两列, 需要将 .aside2 中的 float 改成 right, .main2 中的 margin-left 改成 margin-right -->
</div>
<!-- 能优先渲染 main, 注意: aside 不包括在 container 中-->
<div class="container3">
<div class="main3">主列</div> <!-- 如果想要交换两列, 需要将 .aside3 中的 float 改成 right, .main3 中的 margin-left 改成 margin-right -->
</div>
<div class="aside3">子列</div>
</body>
</html>
两列布局.png
[1] 三列布局
- 两侧固定宽度（设置
absolute、float），主列自适应屏幕（调整margin）。 - 有
absolute + margin、float + margin、float + 负margin等方式。
<!DOCTYPE html>
<html>
<head>
<title>三列布局</title>
<meta charset="utf-8">
<style type="text/css">
/* 方法1: absolute + margin 方式 */
/* 优点: 可以优先渲染主元素 main 中的内容*/
/* 缺点: leftSide 和 rightSide 列脱离了文档流, 当 leftSide 和 rightSide 列比 main 列高时会覆盖后面的布局 */
.container1 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.leftSide1 {
position: absolute;
top: 0; /* 优先渲染 main 中内容时不可以省略，因为 main1 中的 margin 占据了 左、右的大小 */
left: 0;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.rightSide1 {
position: absolute;
top: 0; /* 优先渲染 main 中内容时不可以省略，因为 main1 中的 margin 占据了 左、右的大小 */
right: 0;
width: 300px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main1 {
height: 100px;
margin: 0 300px 0 200px; /* 左侧 200px 被侧边栏覆盖 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法2: float + margin 方式 */
/* 优点和缺点与方法 1 前者相反 */
.container2 {
position: relative;
margin: 10px;
border: 1px solid #000;
}
.leftSide2 {
float: left;
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.rightSide2 {
float: right;
width: 300px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main2 {
height: 100px;
margin: 0 300px 0 200px; /* 左侧 200px 被侧边栏覆盖 */
background-color: rgba(0, 255, 0, .5);
}
/* 方法3: float + 负margin 方式 (即双飞翼布局) */
/* 浮动 container 和 side 列, 通过 负margin 正确定位 side 列
* container 宽度值设为 100%
* main 列的 margin-left 消除被 side 覆盖的部分
* side 不包括在 container 中
*/
/* 优点: 解决了 float + margin 不能优先渲染 main 中的内容 */
.container3 {
float: left; /* 浮动 */
width: 100%;
border: 1px solid #000;
}
.leftSide3 {
float: left;
margin-left: -100%; /* 调整到合适位置 */
width: 200px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.rightSide3 {
float: right;
margin-left: -100%; /* 调整到合适位置 */
width: 300px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
}
.main3 {
height: 100px;
margin: 0 300px 0 200px; /* 左侧 200px 被侧边栏覆盖 */
background-color: rgba(0, 255, 0, .5);
}
</style>
</head>
<body>
<!-- 能优先渲染 main -->
<div class="container1">
<div class="main1">主列</div>
<div class="leftSide1">左列</div>
<div class="rightSide1">右列</div>
</div>
<!-- 不能优先渲染 main -->
<div class="container2">
<div class="leftSide2">左列</div>
<div class="rightSide2">右列</div>
<div class="main2">主列</div>
</div>
<!-- 能优先渲染 main, 注意: side 不包括在 container 中-->
<div class="container3">
<div class="main3">主列</div>
</div>
<div class="leftSide3">左列</div>
<div class="rightSide3">右列</div>
</body>
</html>
三列布局.png
[3] 弹性 (Flex) 布局
- 弹性布局：采用 Flex 布局的元素，称为 Flex 容器（flex container），它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。
- 用法：
display：flex（不能与float、position混用）； - (父)容器属性：
flex-flow（包括flex-direction、flex-wrap）、justify-content（水平）、align-items（垂直）、align-content； - (子)项目属性：
order、flex-grow、flex-shrink、flex-basis、flex、align-self。
- 用法：
接下来是几个应用 Flex 布局的例子：
- 三列等宽布局
<style type="text/css">
#main {
width: 220px;
border: 1px solid black;
display: flex; /* 使用弹性布局 */
}
#main div {
flex: 1; /* 所有弹性盒模型对象的子元素都有相同的长度, 忽略它们内部的内容 */
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
三列等宽布局.png
- 随机变换盒子颜色
<style type="text/css">
#main {
width: 800px;
height: 400px;
border: 1px solid black;
display: flex; /* 使用弹性布局 */
flex-flow: row wrap; /* flex-direction (规定 Flex 项目按行分布) 和 flex-wrap (Flex 项目自动换行) */
justify-content: space-between; /* 水平等距 */
align-items: center; /* 垂直居中 */
}
#main div { /* 定义 Flex 项目 */
width: 100px;
height: 100px;
margin: 2px;
}
</style>
</head>
<body>
<div id="main">
<!-- Js 生成的 Flex 项目 -->
</div>
<script>
var color = ["#FFD700", "#FF4040", "#D1EEEE", "#CAFF70", "#C1CDCD", "#B03060", "#9ACD32", "#7CFC00", "#FF8C00"];
for (var i=0; i < 13; i++) {
var div = document.createElement('div');
var pos = Math.floor(Math.random() * color.length);
div.style.background = color[pos];
var num = Math.floor(Math.random() * 100); /* 生成一个 [0, 100) 大小的整数 */
div.style.order = num; /* Flex 项目按照从小到大的顺序显示 */
div.innerHTML= num;
document.getElementById('main').appendChild(div);
}
</script>
</body>
随机变换盒子颜色.png
更多关于 Flex 用法，可以参考文章
Flex 布局语法教程
