前端学习日志：从零开始构建个人复盘网站（2026年7月5日）

原创已于 2026-07-06 01:11:08 修改 · 134 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2026-07-06 01:10:37 首次发布

前端学习日志：从零开始构建个人复盘网站（2026年7月5日）

显然，前天CSS的粗略学习并不能够支持我继续往下构建网页。现在我卡在了这一步。于是今天的任务就更加简单明了了：我开始研究CSS，主要是Flexbox和grid。有两个网站辅助理解非常的新手友好，分别是Flexbox和Grid Garden。当然W3school的帮助也是必不可少的。

1.关于FLexbox

Flexbox，弹性盒子布局，可以将所有行列上的盒子进行排布，详细内容为以下：

justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content
因为Flex是对行列上的内容进行排布，所以以上的8种基本都是在针对行方向、列方向、行变换以及元素顺序。以下是具体的作用内容。

1.1.Flexbox的具体说明

justify-content:flex-start（起点对齐）flex-end（终点对齐） center（居中）space-between（两端对齐，中间间隔相等）space-around（每个元素两侧间隔相等）space-evenly（所有间隔都相等）。是的，它真的很像word里面的段落设置不是吗？
flex-direction:row row-reverse column column-reverse,字面意思，这个就是负责说明行或者列向哪个方向展开的。row规定行水平方向，column规定列水平方向，加上reverse就是反方向。我认为可以将它简单的理解为x轴方向。
align-items:stretch(填满父容器高度) flex-start(交叉轴起点对齐) flex-end(交叉轴终点对齐) center（交叉轴居中）baseline（按文字基线对齐）。交叉轴永远垂直于主轴，我认为可以简单的理解为y轴。 文字基线更简单，就是文字的底部基线。
flex-wrap:nowrap(不换行)wrap(换行)wrap-reverse(反向换行) 。对于在页面一行放不下的情况下，wrap就可以起到换行美化的作用。
align-content:stratch(拉伸)flex-start（多行整体靠上）flex-end(多行整体靠下)center(多行整体居中)space-between(行间距相等)space-around(每行两侧间隔相等)。首先需要注意，align-content只有在flex-wrap生效且有多行时才生效。 它和align-items的区别是，align-items是控制单行元素的对齐方式，而align-content则是针对多行的整体分布。
flex-flow:flex-direction flex-wrap的简写，注意顺序千万不要记错了。
order：单独从一行里里面拎一个元素出来。
align-self:也是从父容器种提取特殊元素。和align-items的选项是一致的。

2.关于Grid

Grid，二维布局系统，同时控制行列。正如Grid Garden里面展示的，效果就是很像在表格里面进行填色游戏。只不过有时候的颜色要求会稍微刁钻一点。主要的内容有以下几种：

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
gap
pow-gap
column-gap
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
接下来我尽可能简洁的将他们都规整一下。这实在是太多了！！！

2.1.Grid的具体说明

grid-template-columns
grid-template-rows
grid-template-areas
grid-template这四个可以放在一起讲，因为除了是改变列、行、区域输入的区别以外，它们基本上没什么不一样。都是定义一片区域（行、列、区块）的数量和高度。 其中涉及到fr和 repeat()这两个需要单独说明一下。fr用来规划剩余空间的份数，而repeat()则用来简化重复的数值。grid-template是以上三者的合并简写，格式是areas + rows / columns。
gap
row-gap
column-gap 这三个都是控制网格项之间的间距。区别是，row-gap负责行间距，而column-gap负责列间距。
justify-items
align-items
place-items都是控制网格项在各自单元格内的位置 ——区别只在于管水平、垂直，还是一起管。
justify-content
align-content
place-content都是控制整个网格在容器里的位置 ——前提是网格总尺寸小于容器尺寸。
grid-auto-columns
grid-auto-rows
grid-auto-flow控制"超出定义范围"的网格项怎么处理。
grid是把 grid-template-rows + grid-template-columns + grid-template-areas + grid-auto-flow + grid-auto-rows/columns 全塞一起的超级简写。
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area都是控制子元素放在哪几根线之间——区别只在于分别写起止点、合并写、还是用名字。grid-column-start grid-column-end分别控制列的起始和结束。grid-row-start grid-row-end分别控制行的起始线和结束线。grid-column grid-row这俩就是简写。