前三关让页面"有内容、有样式",这一关解决"东西放在哪"。导航横排、卡片并排、手机上自动变竖排——都是布局的功劳。学完 Flex 和 Grid,你能搭出任何常见的网页排版。
4.1 display:元素是"占一行"还是"排一排"
display 决定一个元素怎么摆放,最常用三个值:
block:块级,独占一行(如div、p)。inline:行内,几个挤在一行(如span、a)。none:彻底隐藏,位置也不留。
Flex 和 Grid 也是 display 的取值——一旦给容器设 display:flex,它的子元素就自动进入弹性排列模式。
4.2 Flexbox:一根轴上的排列神器
Flex 管"一条线"上的排列(横排或竖排),做导航栏、按钮组、一行卡片最方便。三句话上手:
.box {
display: flex; /* 1. 开启弹性布局 */
justify-content: center; /* 2. 主轴(横向)对齐 */
align-items: center; /* 3. 交叉轴(竖向)对齐 */
gap: 16px; /* 子元素之间的间距 */
}| 属性 | 作用 | 常见值 |
|---|---|---|
flex-direction | 主轴方向 | row(默认横)/ column(竖) |
justify-content | 沿主轴怎么分 | center / space-between / space-around |
align-items | 垂直于轴怎么对齐 | center / stretch / flex-start |
flex-wrap | 放不下时是否换行 | wrap(换行) |
记不住没关系,先跑起来改数值看效果。下面的练习会让你亲手用 space-between 做出" logo 在左、菜单在右"的导航栏。
4.3 Grid:二维网格,整版排版
需要同时管"几行几列"时,Grid 更直观。做卡片墙、图片画廊、页面大框架用它:
.wall {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 等分列 */
gap: 16px;
}1fr 是"一份剩余空间",repeat(3, 1fr) 就是均分成 3 列。想更聪明可用 auto-fill 配合 minmax,列数随屏宽自动增减,天然响应式。
4.4 position:把元素钉在某个位置
做吸顶导航、角标、悬浮按钮会用到 position:
relative:相对自己原位偏移,常用来当"参照物"。absolute:相对最近的已定位祖先偏移,做角标、弹窗。fixed:相对屏幕固定,滚动也不动,做悬浮按钮 / 吸顶栏。sticky:滚到某处后"粘住",做吸顶导航最省心。
配合 top / right / bottom / left 四个方向决定偏移量。
4.5 响应式:@media 让页面适应手机
同一份页面,电脑上三列、手机上一列——这叫响应式。核心是 @media 媒体查询:"当屏幕小于某个宽度时,改用下面这套样式"。
/* 默认(电脑)样式写外面 */
.wall { grid-template-columns: repeat(3,1fr); }
@media (max-width: 600px) { /* 屏幕≤600px 时 */
.wall { grid-template-columns: 1fr; /* 变单列 */ }
}响应式一定离不开这一行 meta:<meta name="viewport" content="width=device-width, initial-scale=1">。没有它,手机上根本不会应用你的移动端样式。
✏️ 动手练一练
这里做了一个"导航栏 + 卡片墙"的组合练习,还能模拟窄屏。改 CSS,或拖动浏览器窗口宽度观察变化。
- 把
.nav的justify-content改成space-between,让 logo 和菜单分居两端。 - 把
.wall的repeat(3,1fr)改成repeat(2,1fr),看卡片变两列。 - 在
@media里把max-width后的列数改成1fr,再把浏览器窗口拖窄,观察卡片自动变单列。
@media 里的列数为 1fr,再看窄屏下的效果。📝 随堂小测
Q1 想让子元素在一条横线上排开、并方便地对齐,应给父容器设?
display:flex 开启弹性布局,用 justify-content/align-items 沿两轴对齐。
Q2 在 Flex 里让两端对齐(如 logo 最左、菜单最右),用哪个值?
space-between 会把两端贴边、中间均分间距。
Q3 要做"几行几列"的卡片墙,更合适的布局是?
Grid 天生管二维,repeat(3,1fr) 一键三列。
Q4 手机上看不到响应式效果,多半是漏了什么?
没有 <meta name="viewport" ...>,移动端浏览器会按桌面宽度渲染,@media 不生效。