CSS的Flex布局和Grid布局笔记

引言

CSS的布局是构建网页布局结构的重要组成部分。其中，Flex布局（又称弹性布局）和Grid布局（又称网格布局）是两种较为流行和常用的方式。本文将对这两种布局进行详细介绍，并提供一些自己的思考。

Flex布局是一种一维布局模型，主要用于创建灵活的、可伸缩的布局。它通过控制容器内的子元素来实现页面布局。

Flex容器：被设置为display: flex或display: inline-flex的容器。

Flex项目：Flex容器中的每个子元素都是一个Flex项目。

在父元素上设置以下属性，将其定义为flex容器：

display: flex;：将元素定义为flex容器。
flex-direction: row | row-reverse | column | column-reverse;：指定主轴的方向，默认为row。可选值有水平方向的row（默认值）、反向row、垂直方向的column和反向column。
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;：指定flex项在主轴上的对齐方式，默认为flex-start。可选值包括靠近起点的flex-start、靠近末尾的flex-end、居中的center、剩余空间平均分布的space-between、每个项目周围具有相同间隔的space-around，以及每个项目周围具有相同间距的space-evenly等。
align-items: flex-start | flex-end | center | baseline | stretch;：指定flex项在交叉轴上的对齐方式，默认为stretch。可选值包括靠近起点的flex-start、靠近末尾的flex-end、居中的center、基线的baseline和拉伸至填满交叉轴的stretch。
flex-wrap: nowrap | wrap | wrap-reverse;：指定是否允许flex项换行，默认为nowrap。可选值包括不换行的nowrap、自动换行的wrap和反向换行的wrap-reverse。

在子元素上设置以下属性，将其定义为flex项：

order: <integer>;：指定flex项的显示顺序，默认为0。较小的值会排在前面。
flex-grow: <number>;：指定flex项在剩余空间中增长的比例，默认为0。如果所有项目的flex-grow都设为1，则平均分配剩余空间。如果一个项目的flex-grow设为2，其他项目都设为1，则它将占据更多的剩余空间。
flex-shrink: <number>;：指定flex项在空间不足时缩小的比例，默认为1。如果所有项目的flex-shrink都设为1，则等比例缩放。如果一个项目的flex-shrink设为0，其他项目都设为1，则空间不足时该项目不会缩小。
flex-basis: <length> | auto;：指定flex项在分配多余空间之前的基准大小，默认为auto。可选值包括固定长度的像素值或百分比，以及auto（项目本身的大小）。
align-self: auto | flex-start | flex-end | center | baseline | stretch;：覆盖flex容器上的align-items属性，并指定单独的flex项的对齐方式。

我个人认为Flex布局非常适用于那些需要处理一维布局问题的场景。其优势在于简洁、灵活和易于理解和使用。但是，当需要处理更复杂的二维布局时，则应该考虑使用Grid布局。

Grid布局是一种二维布局模型，通过将网页视区划分为行和列的结构来实现页面布局。

Grid容器：被设置为display: grid的容器。

Grid项：Grid容器中的每个子元素都是一个Grid项。

在父元素上设置以下属性，将其定义为网格容器：

display: grid;：将元素定义为网格容器。
grid-template-columns: <track-size>...;：指定网格列的大小，默认为auto。可选值包括固定长度的像素值或百分比，fr单位表示自动分配剩余空间。
grid-template-rows: <track-size>...;：指定网格行的大小，默认为auto。可选值同上。
grid-gap: <row-gap> <column-gap>;：指定网格行列之间的间隙，默认为0。可选值包括像素值、百分比或其他长度单位。

在子元素上设置以下属性，将其定义为网格项：

grid-column-start: <line> | auto;：指定网格项开始所在的列线，默认为auto。可选值为网格线的编号或关键字auto。
grid-column-end: <line> | auto;：指定网格项结束所在的列线，默认为auto。可选值同上。
grid-row-start: <line> | auto;：指定网格项开始所在的行线，默认为auto。可选值同上。
grid-row-end: <line> | auto;：指定网格项结束所在的行线，默认为auto。可选值同上。
grid-column: <start-line> / <end-line>;：将grid-column-start和grid-column-end合并为一个属性，简化设置。
grid-row: <start-line> / <end-line>;：将grid-row-start和grid-row-end合并为一个属性，简化设置。
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;：根据名称或网格线指定网格区域的起始和结束

相比于Flex布局，我觉得Grid布局更适用于处理复杂的二维布局。它能够很方便地划分行和列，并且支持命名区域，使得布局更加灵活和直观。同时，Grid布局还提供了一系列对齐方式、间距设置等属性，使得布局效果更加精细化。

Flex布局和Grid布局都是CSS中非常强大的布局方式，它们各自适用于不同的场景。Flex布局主要用于解决一维布局问题，而Grid布局则适用于处理更为复杂的二维布局。根据实际需求，我们可以选择使用适合的布局模型来搭建出优雅、可维护的页面布局。