利用flex完成圣杯布局

基本思路

1首先完成header,footer,main的布局。
利用flex-direction: column;完成上述内容的竖向布局。

2.之后再完成main之内的三部分的布局。
这个是横向布局

3 重点理解一下flex:1的意思。如果某个元素flex:1且没有设置宽度,则该元素占满空间。

4body是header,footer,main的容器,body中的display:flex;控制header,footer,main的布局。
main是left,right,content的容器,main中的display:flex;控制left,right,content的布局不要混淆。




    

结果如图

利用flex完成圣杯布局_第1张图片
image.png

你可能感兴趣的:(利用flex完成圣杯布局)