JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
集成电路应用开发
C/C++
狂野架构师
IP短视频
UI培训之弹性盒模型
更新时间:2016年04月18日14时25分 来源:传智播客UI培训学院 浏览次数:
1.1 弹性盒模型概念
CSS3中新增的一种布局盒模式，可以让子元素按着比例来平分父元素宽度<style type="text/css">
*{
margin:0;
padding:0;
}
div{
width: 400px;
display: flex;
margin:100px auto 0;
border:1px solid #ccc;
}
p{
height: 40px;
width: 200px;
}
p:nth-child(1){
background: lightblue;
}
p:nth-child(2){
background: orange;
}
p:nth-child(3){
background: seagreen;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
</div>
1.2 伸展和收缩模式
可以设置相应的基数，如果子元素的基数和大于父元素总宽则需要收缩，如果小于就按着相应的比例扩展。
<html>
<head>
<meta charset="UTF-8">
<title>伸缩盒模型</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
display: flex;
width: 400px;
margin:100px auto 0;
border:1px solid #ccc;
}
p{
width: 100px;
height: 40px;
}
p:nth-child(1){
background: lightblue;
}
p:nth-child(2){
flex-grow: 1;
background: orange;
}
p:nth-child(3){
flex-grow: 4;
background: seagreen;
}
</style>
</head>
<body>
<div>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
1.3 弹性盒子子元素显示方向
可以通过新增的属性来控制子元素的显示方向和是否多行显示，以及对其方式。<head>
<meta charset="UTF-8">
<title>flex子元素显示方向</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.box{
width: 400px;
display: flex;
padding:10px;
margin:100px auto 0;
border:1px solid #CCCCCC;
flex-direction: column-reverse;
}
p{
flex: 1;
height: 100px;
}
p:nth-child(1){ background: lightblue; }
p:nth-child(2){ background: orange; }
p:nth-child(3){ background: seagreen; }
/*
flex-direction: 设置 flex父容器下子元素的显示方向。
row: 表示正向排序
row-reverse: 反向排序
column: 横向排列
column-reverse:横向反序排列
*/
</style>
</head>
<body>
<div class="box">
<p></p>
<p></p>
<p></p>
</div>
</body>
本文版权归传智播客UI培训学院所有，欢迎转载，转载请注明作者出处。谢谢！
作者：传智播客UI培训学院
首发：http://www.itcast.cn/ui
最新资讯
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2024 All Rights Reserved 苏ICP备16007882号营业执照增值电信业务经营许可证出版物经营许可证
苏公网安备 32132202001156号