CSS--五种经典布局
参考链接:阮一峰--《只要一行代码,实现五种CSS经典布局》
一、空间居中布局
// html <div class="container"> <div class="item">1</div> </div> // CSS .container { display: grid; place-items: center; // 是简写: place-items:<align-items>垂直位置 <justify-items>水平位置 background: lightblue; width: 600px; height: 600px; } .item { border: 1px solid; border-radius: 8px; width: 80px; height: 80px; line-height: 80px; text-align: center; font-size: 2rem; color: #fff; }
二、并列式布局
Flex 布局比较方便,内容居中(justify-content)可换行(flex-wrap)
flex:<flex-grow> <flex-shrink> <flex-basis>
详细看:bilibili-flex 或 Flex 语法
三、两栏式布局
两栏布局就是一个边栏,一个主栏。
使用 Grid 实现很容易
.container { display: grid; grid-template-columns: minmax(150px, 25%) 1fr; }
四、三明治布局
三明治布局是指,页面在垂直方向上,分为:页眉,内容区,页脚
.container { display: grid; grid-template-rows: auto 1fr auto; }
上面代码写在容器上面,指定采用 Grid 布局。核心代码是grid-template-rows
那一行,指定垂直高度怎么划分,这里是从上到下分成三部分。第一部分(页眉)和第三部分(页脚)的高度都为auto
,即本来的内容高度;第二部分(内容区)的高度为1fr
,即剩余的所有高度,这可以保证页脚始终在容器的底部。
五、圣杯布局