简单案例解析CSS3的分栏布局和弹性布局
2017-11-15 17:41
701 查看
分栏布局
分栏布局，指按指定列数均分某个容器，每列宽度一样。分栏布局主要由三个参数实现：column-count: 分栏数;
column-gap: 栏间间隙，默认为0px;
column-rule: 栏间线条，默认为0px;
<style>
#container {
height: 300px;
border: dashed 2px orange;
width: 1000px;
column-count: 3;
column-gap: 0px;
column-rule: solid 0px gainsboro;
-moz-column-count: 3;
-moz-column-gap: 0px;
-moz-column-rule: solid 0px gainsboro;
-webkit-column-count: 3;
-webkit-column-gap: 0px;
-webkit-column-rule: solid 0px gainsboro;
}
#d1 {
background-color: #32CD32;
}
#d2 {
background-color: #87CEEB;
}
#d3 {
background-color: #D2691E;
}
#d1,
#d2,
#d3 {
height: 300px;
overflow: hidden;
word-break: break-word;
}
</style>
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>效果图：
（注）上述代码用到-moz-和-webkit-是为了实现浏览器的兼容。
使用我们接着会介绍的弹性布局也可以实现同样分栏布局的效果：
<style>
#container {
width: 1000px;
height: 300px;
display: flex;
border: dashed 1px orange;
}
#d1 {
background-color: #32CD32;
}
#d2 {
background-color: #87CEEB;
}
#d3 {
background-color: #D2691E;
}
#d1,
#d2,
#d3 {
height: 300px;
flex: 1;
}
.animation {
transition: flex 0.5s linear;
}
</style>
<body>
<div id="container">
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</div>
</body>
<script>
$(document).ready(function() {
$("#container div").unbind().bind("click", function(e) {
$(this).css("flex", "4");
$($(this).siblings()).css("flex", "1"); //获取同级其他兄弟元素
});
setTimeout(function() {
$("#container div").addClass("animation");
}, 100);
});
</script>（注）以上源码中还用到了transition，当点击每栏的时候，会有一个宽度变化的动画效果，类似于展示栏扩张动态效果，变化后的效果图：
弹性布局
按照文档流的规则，每个div会独占一行，在介绍弹性布局前，这里再引用一个盒布局的案例。盒布局的作用在于实现div共享一行。盒布局主要参数设置：display: -moz-box;
display: -webkit-box;
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
display: -moz-box;
display: -webkit-box;
width: 700px;
margin: 0 auto;
}
#left-sidebar {
background-color: orange;
width: 200px;
padding: 20px;
box-sizing: border-box;
}
#contents {
background-color: yellow;
width: 300px;
padding: 20px;
box-sizing: border-box;
}
#right-sidebar {
background-color: limegreen;
width: 300px;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>Left Menu</h2>
<ul>
<li>
<a href="#">url</a>
</li>
<li>
<a href="#">url</a>
</li>
<li>
<a href="#">url</a>
</li>
</ul>
</div>
<div id="contents">
<h2>Center</h2>
<p>新华社北京10月30日电 中央纪委监察部30日召开传达学习党的十九大精神大会。中共中央政治局常委、中央纪委书记赵乐际出席会议并讲话。他强调，中央纪委监察部在维护以习近平同志为核心的党中央权威和集中统一领导上担负着特殊使命和重大责任，必须忠诚履职、勇于担当，带头维护习近平总书记在党中央和全党的核心地位，带头贯彻习近平新时代中国特色社会主义思想，带头落实党的十九大确定的各项任务，不松劲、不停步、再出发，推动全面从严治党向纵深发展。</p>
</div>
<div id="right-sidebar">
<h2>Right Menu</h2>
<ul>
<li>
<a href="#">url</a>
</li>
</ul>
</div>
</div>
</body>
<script>
</script>
</html>效果图：
（注）盒布局在此例中实现了共享一行且共享高度height
弹性布局与和布局类似，区别在于弹性布局不必一定设置容器的width值，可以通过一些参数实现弹性变化。
弹性布局参数设置：
display: flex; 设置为弹性布局
flex: 该元素按一定比例自动扩展宽度或高度。
order: 显示顺序，水平顺序：从左(小)到右(大)；垂直顺序： 从上（小）到下（大）
flex-direction: 改变排列方向，如当值为column时表示纵向排列，row为水平排序。
flex-wrap: 表示当超出浏览器宽度时，是否换行。nowrap不换 ； wrap换 ；wrap-reverse换，但方向相反。
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
width: 1000px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 auto;
}
#left-sidebar {
order: 1;
background-color: orange;
width: 200px;
padding: 20px;
box-sizing: border-box;
}
#contents {
order: 2;
flex: 1;
background-color: yellow;
padding: 20px;
box-sizing: border-box;
}
#right-sidebar {
order: 3;
background-color: limegreen;
width: 100%;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>Left Menu</h2>
<ul>
<li>
<a href="#">url</a>
</li>
<li>
<a href="#">url</a>
</li>
<li>
<a href="#">url</a>
</li>
</ul>
</div>
<div id="contents">
<h2>Center</h2>
<p>新华社北京10月30日电 中央纪委监察部30日召开传达学习党的十九大精神大会。中共中央政治局常委、中央纪委书记赵乐际出席会议并讲话。他强调，中央纪委监察部在维护以习近平同志为核心的党中央权威和集中统一领导上担负着特殊使命和重大责任，必须忠诚履职、勇于担当，带头维护习近平总书记在党中央和全党的核心地位，带头贯彻习近平新时代中国特色社会主义思想，带头落实党的十九大确定的各项任务，不松劲、不停步、再出发，推动全面从严治党向纵深发展。</p>
</div>
<div id="right-sidebar">
<h2>Right Menu</h2>
<ul>
<li>
<a href="#">url</a>
</li>
</ul>
</div>
</div>
</body>
<script>
</script>
</html>效果图：
（注）上例中，由于#right-sidebar容器已经超出父容器宽度，会自动流动到下一列。
在实际应用中，导航条也可以通过弹性布局实现，要有规律的布置容器内容的各项排序，可以通过以下参数设置：（假设弹性布局为水平方向布局）
justify-content，表示当盒子元素没有完全填充内容时，指定子元素的对齐方式。
（1）flex-start: 从最左边开始布局所有子元素
（2）flex-end:从最右边开始布局所有子元素
（3）center:居中布局所有子元素
（4）space-between:将第一个元素布局在最左边，最后一个子元素布置在最右边，将空白部分平均分配在所有子元素之间。
（5）space-around:将空白部分平均分配到所有子元素之间，包括两边边界也分配空白。
align-items，与justify-content类似，表示子元素垂直方向布局。
（1）flex-start:从顶部开始布局所有子元素
（2）flex-end:从底部开始布局所有子元素
（3）center: 居中布局所有子元素
（4）baseline:如果子元素布局方向与容器方向不一致，则等效于flex-start,否则所有子元素内容沿着基线对齐
（5）stretch: 同一行中所有子元素高度调整为最大，为默认值。
align-self，与align-items参数及功能一样，但区别在于align-self效果只能作用于单一子元素自身。
<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#container {
text-align: center;
display: flex;
width: 1000px;
border: dashed 1px blue;
flex-direction: row;
justify-content: center;
}
#container div {
padding: 30px;
width: 100px;
}
#d1 {
background-color: orange;
}
#d2 {
background-color: yellow;
}
#d3 {
background-color: limegreen;
}
#container1 {
width: 1000px;
height: 300px;
border: dashed 1px blue;
text-align: center;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
}
#container1 div {
padding: 30px;
}
#d4 {
background-color: orange;
}
#d5 {
background-color: yellow;
}
#d6 {
background-color: limegreen;
}
#container2 {
width: 1000px;
height: 300px;
text-align: center;
display: flex;
border: dashed 1px blue;
flex-direction: row;
align-items: center;
}
#container2 div {
padding: 30px;
width: 100px;
font-size: 12px;
}
#d7 {
background-color: orange;
align-self: flex-start;
}
#d8 {
background-color: yellow;
align-self: flex-end;
}
#d9 {
background-color: limegreen;
}
</style>
</head>
<body>
<div id="container">
<div id="d1">示例文字1</div>
<div id="d2">示例文字2</div>
<div id="d3">示例文字3</div>
</div>
<br />
<div id="container1">
<div id="d4">示例文字4</div>
<div id="d5">示例文字5</div>
<div id="d6">示例文字6</div>
</div>
<br />
<div id="container2">
<div id="d7">示例文字7</div>
<div id="d8">示例文字8</div>
<div id="d9">示例文字9</div>
</div>
</body>
<script>
</script>
</html>效果图：
（注）上例中#d9并没有设置align-self，因此它垂直方向的布局继承于#container2的align-items: center;
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简单案例解析CSS3的分栏布局和弹性布局（续）：弹性布局构造网站主页效果Demo
- Flexbox布局（CSS3 弹性布局，Flexible Box）之 基本概念解析
- css3中弹性布局flex简单总结1
- 几个CSS3的flex弹性盒模型布局的简单例子演示
- 18、实例 CSS3之分栏布局
- 【css3】flex弹性布局
- CSS3之布局（分栏布局、响应式布局）
- CSS3弹性盒模型，Flex布局教程
- css3盒子布局-定义盒子的弹性空间(box-flex)
- [翻译] CSS3弹性盒模型布局模块 (aka Flex Box)介绍和demo/测试用例
- css3flex布局，一图透彻解析。
- css3 flexbox layout(弹性布局)完全解析
- css3移动端flex弹性盒子布局
- CSS3系列：流式(弹性)布局（flex布局）
- CSS3 flex弹性布局
- 你以为 CSS3 只是个简单的布局？
- css3弹性布局——display：flex
- easyUi的简单布局案例
- Pull解析xml文件简单案例
- CSS3 弹性伸缩布局（中）（20160906-0037）