直接看代码
//html代码
<div class="site">
<header>
<app-header></app-header>
</header>
<main>
</main>
<footer>
<app-footer></app-footer>
</footer>
</div>
//css代码
html,body,app-root,.site{
width: 100%;
height: 100%;
margin: 0;
}
.site{
display: flex;
flex-direction: column;/*横向*/
/*flex-direction: row;纵向*/
}
main{flex: 1;}
header{background-color: #cccccc;}
footer{background-color: #cccccc;}
最终效果：
image.png
直接看代码 最终效果：
flex中纵向和横向布局 flex布局中分纵向和横向布局，还有主轴和交叉轴的概念，我们首先要给元素的父级上添加di...
父元素设置 flex布局实现父元素：display:flex;横向排列flex-flow:column wrap ...
1.CSS实现瀑布流布局（display: flex） 本例使用 CSS flex 实现瀑布流布局关键点，横向fl...
allen 自定义样式库（less) 常用class样式表名称和解释 1.flex弹性布局 横向排列 纵向排列 s...
基本布局 Row - 横向布局 Column - 纵向布局 Stack - 层级布局 其他常用组件 Backdro...
一、flexbox布局（弹性布局） 1.指定flex布局 { display:flex;display: -web...
根据css的布局习惯大致分为： 线性布局：横向使用row，纵向使用Colemn。 弹性盒子：flex和Expand...
快应用之flex布局 在我们常用的布局中有display + position + float进行布局，但是这些布...
快应用之flex布局 在我们常用的布局中有display + position + float进行布局，但是这些布...
本文标题：常用全屏幕横向/纵向布局-display:flex
本文链接：https://www.haomeiwen.com/subject/dhsbrftx.html
网友评论