需求:圣杯布局。上下左右是固定高度/宽度的盒子,中间部分自适应缩放
知识点:CSS弹性盒,更改主轴
<header></header>
<main>
<aside></aside>
<section></section>
<article></article>
</main>
<footer></footer>
*{
margin: 0;padding: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
header{
width: 100%;
height: 100px;
background: pink;
}
main{
flex:1;
background: skyblue;
display: flex;
}
aside{
width: 100px;
height: 100%;
background: lawngreen;
}
section{
flex: 1;
background: lavenderblush;
}
article{
width: 100px;
height: 100%;
background: lightseagreen;
}
footer{
width: 100%;
height: 100px;
background: lightcoral;
}