您的位置：首页 > Web前端 > CSS

css3弹性布局学习

2019-08-08 16:09 204 查看
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 本文链接：https://blog.csdn.net/qq_35081380/article/details/98874693

虽然之前接触过一点,但是长期不用,又忘了,今天写了一个小案例,来温习一遍,下次要用直接复制
没用弹性布局之前,要写这个玩意挺难受的,还要用哪个html框架,现在直接几行代码就写一个自动响应式的了,非常方便



图太大就截一点点吧,是全部铺满的,很好用
代码
 

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>路由的学习</title>
<!--    引入vue.js-->
<script src="node_modules/vue/dist/vue.js"></script>
<!--    引入vue-router.js-->
<script src="node_modules/vue-router/dist/vue-router.js"></script>
<style>
/*css初始化*/
*{
margin:0;
pading:0;
}
body,html{
/*把主体给撑满*/
height: 100%;
width: 100%;
}
#app{
/*设置父容器为弹性布局*/
display: flex;
height: 100%;
width: 100%;
/*设置主轴方向为竖直排列*/
flex-direction:column;
}

/*头部样式*/
.header{
width: 100%;
height: 60px;
background: #ccc;
}
/*内容主体*/
.container{
/*铺满剩余空间*/
flex-grow: 1;
display: flex;
/*设置主轴方向为水平排列*/
flex-direction: row;
}
/*主体内左侧菜单*/
.container .left{
flex: 2;
background: red;

}
/*主体内左侧内容*/
.container .right{
flex: 10;
background: blue;
}

</style>
</head>
<body>
<div id="app">
<!--    头部-->
<div class="header">头部</div>
<div class="container">
<!--        左侧菜单-->
<div class="left">左侧菜单</div>
<!--        右侧主体-->
<div class="right">右侧主体</div>
</div>
</div>
<script>
const app = new Vue({
el: '#app',

})
</script>
</body>
</html>

 

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航