阮⼀峰⽼师只要⼀⾏代码,实现五种CSS经典布局(转载)
只要⼀⾏代码,实现五种 CSS 经典布局
作者:
⽇期:
页⾯布局是样式开发的第⼀步,也是 CSS 最重要的功能之⼀。
常⽤的页⾯布局,其实就那么⼏个。下⾯我会介绍5个经典布局,只要掌握了它们,就能应对绝⼤多数常规页⾯。
这⼏个布局都是⾃适应的,⾃动适配桌⾯设备和移动设备。代码实现很简单,核⼼代码只有⼀⾏,有很⼤的学习价值,内容也很实⽤。
我会⽤到 CSS 的 和 ,不过只⽤到⼀点点,不熟悉的朋友可以先看看教程链接,熟悉⼀下基本概念。每⼀个布局都带有 CodePen ⽰例,也可以到统⼀查看。
本⽂是跟极客⼤学合作的前端学习讲座的⼀部分,详见⽂末说明。
⼀、空间居中布局
空间居中布局指的是,不管容器的⼤⼩,项⽬总是占据中⼼点。
CSS 代码如下( ⽰例)。
.container {
display: grid;
place-items: center;
}
上⾯代码需要写在容器上,指定为 Grid 布局。核⼼代码是place-items属性那⼀⾏,它是⼀个简写形式。
place-items: <align-items> <justify-items>;
align-items属性控制垂直位置,justify-items属性控制⽔平位置。这两个属性的值⼀致时,就可以合并写成⼀个值。所以,place-items: center;等同于place-items: center center;。
同理,左上⾓布局可以写成下⾯这样。
place-items: start;
右下⾓布局。
place-items: end;
⼆、并列式布局
并列式布局就是多个项⽬并列。
如果宽度不够,放不下的项⽬就⾃动折⾏。
它的实现也很简单。⾸先,容器设置成 Flex 布局,内容居中(justify-content)可换⾏(flex-wrap)。
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
然后,项⽬上⾯只⽤⼀⾏flex属性就够了()。
.item{
flex: 0 1 150px;
margin: 5px;
}
flex属性是flex-grow、flex-shrink、flex-basis这三个属性的简写形式。
flex: <flex-grow> <flex-shrink> <flex-basis>;
html的flex布局flex-basis:项⽬的初始宽度。
flex-grow:指定如果有多余宽度,项⽬是否可以扩⼤。
flex-shrink:指定如果宽度不⾜,项⽬是否可以缩⼩。
flex: 0 1 150px;的意思就是,项⽬的初始宽度是150px,且不可以扩⼤,但是当容器宽度不⾜150px时,项⽬可以缩⼩。
如果写成flex: 1 1 150px;,就表⽰项⽬始终会占满所有宽度。
三、两栏式布局
两栏式布局就是⼀个边栏,⼀个主栏。
下⾯的实现是,边栏始终存在,主栏根据设备宽度,变宽或者变窄。如果希望主栏⾃动换到下⼀⾏,可以参考上⾯的"并列式布局"。
使⽤ Grid,实现很容易()。
.container {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
上⾯代码中,grid-template-columns指定页⾯分成两列。第⼀列的宽度是minmax(150px, 25%),即最⼩宽度为150px,最⼤宽度为总宽度的25%;第⼆列为1fr,即所有剩余宽度。
四、三明治布局
三明治布局指的是,页⾯在垂直⽅向上,分成三部分:页眉、内容区、页脚。
这个布局会根据设备宽度,⾃动适应,并且不管内容区有多少内容,页脚始终在容器底部(粘性页脚)。也就是说,这个布局总是会占满整个页⾯⾼度。
CSS 代码如下()。
.container {
display: grid;
grid-template-rows: auto 1fr auto;
}
上⾯代码写在容器上⾯,指定采⽤ Grid 布局。核⼼代码是grid-template-rows那⼀⾏,指定垂直⾼度怎么划分,这⾥是从上到下分成三部分。第⼀部分(页眉)和第三部分(页脚)的⾼度都为auto,即本来的内容⾼度;第⼆部分(内容区)的⾼度为1fr,即剩余的所有⾼度,这可以保证页脚始终在容器的底部。
五、圣杯布局
圣杯布局是最常⽤的布局,所以被⽐喻为圣杯。它将页⾯分成五个部分,除了页眉和页脚,内容区分成左边栏、主栏、右边栏。
这⾥的实现是,不管页⾯宽度,内容区始终分成三栏。如果宽度太窄,主栏和右边栏会看不到。如果想将这三栏改成⼩屏幕⾃动堆叠,可以参考并列式布局。
HTML 代码如下。
<div class="container">
<header/>
<div/>
<main/>
<div/>
<footer/>
</div>
CSS 代码如下()。
.container {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
上⾯代码要写在容器上⾯,指定采⽤ Grid 布局。核⼼代码是grid-template属性那⼀⾏,它是两个属性grid-template-rows(垂直⽅向)
和grid-template-columns(⽔平⽅向)的简写形式。
grid-template: <grid-template-rows> / <grid-template-columns>
grid-template-rows和grid-template-columns都是auto 1fr auto,就表⽰页⾯在垂直⽅向和⽔平⽅向上,都分成三个部分。第⼀部分(页眉和左边栏)和第三部分(页脚和右边栏)都是本来的内容⾼度(或宽度),第⼆部分(内容区和主栏)占满剩余的⾼度(或宽度)。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。