效果：随窗口大小进行缩放
display:flex
在父容器中设置 display:flex
子容器就可以进行弹性变化了。
justify-content
横向轴
align-items
竖向轴
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
.box{
height: 700px;
background-color: blueviolet;
/* 设置属性为 flex */
display: flex;
/* 设置属性 横轴排列的方式 */
justify-content: flex-end;
/* 设置属性 竖轴排列的方式 */
align-items: center;
}
.box div{
width: 250px;
height: 100px;
}
.box1{
/* 给子元素设置flex，可以设置子元素的占比 */
flex:1;
background-color: chartreuse;
}
.box2{
/* 给子元素设置flex，可以设置子元素的占比 */
flex:3;
font-size: 30px;
background-color: crimson;
}
.box3{
font-size: 50px;
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">你好1</div>
<div class="box2">你好2</div>
<div class="box3">你好3</div>
</div>
</body>
</html>效果：
来自：html5+css3：https://www.imooc.com/learn/9
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
