CSS Flexbox 和 Grid：构建响应式布局的艺术

Flex灵活布局

显示： 柔性

打开 Flex 布局模式。将一个元素设置为 Flex 容器，其直接子元素将成为 Flex 项。

.container {
    display: flex;
}

弯曲方向

定义主轴方向（项目排列方向）。可选值：

• 行（默认）：水平，从左到右。
• row-reverse：水平方向，从右到左。
• 列：垂直，从上到下。
• column-reverse：垂直，从下到上。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

柔性包裹

控制当一行空间不足时是否换行。可选值：

• nowrap（默认）：不换行，物品可能会溢出容器。
• wrap：换行，项目排列成多行。
• wrap-reverse：换行，第一行在底部，后续行向上排列。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

证明内容合理

定义主轴上的对齐方式。可选值：

• flex-start（默认）：项目与起点对齐。
• flex-end：项目与终点对齐。
• center：项目居中对齐。
• space- Between：均匀分布项目之间的间距，第一个和最后一个项目分别附着在容器的两端。
• space-around：项目之间均匀分布间距，项目两侧的间距相等。
• space-evenly：均匀分布item之间的间距，item与容器边缘的间距以及item之间的间距相等。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

对齐项目

定义交叉轴上的对齐方式。可选值：

• 拉伸（默认）：项目拉伸以填充整个横轴。
• flex-start：项目与横轴的起点对齐。
• flex-end：项目与横轴的末端对齐。
• center：项目以横轴为中心。
• 基线：项目按基线对齐。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

对齐内容

仅适用于多行Flex布局（flex-wrap:wrap），定义多行项目在横轴上的对齐方式。可选值：

• 拉伸（默认）：每行拉伸以填充整个交叉轴。
• flex-start：每行与交叉轴的起点对齐。
• flex-end：每行与交叉轴的末端对齐。
• center：每行与交叉轴的中心对齐。
• space- Between：均匀分布每行之间的空间，第一行和最后一行分别附着在容器的两端
• space-around：均匀分布每行之间的空间，且行两侧的空间相等。

.container {
    display: flex;
}

命令

定义项目的顺序。值越小，阶数越高。默认值为 0。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

弹性增长

定义项目的放大比例。默认值为0，表示不放大。如果所有项目都设置为非零值，则剩余空间按比例分配。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

弯曲收缩

定义项目的收缩率。默认为1，意味着它可以收缩。如果所有项目都设置为非零值，它们会按比例缩小以防止溢出容器。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

弹性基础

定义分配剩余空间之前项目的初始大小。接受长度、百分比、自动（默认）或内容值。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

弯曲

flex-grow、flex-shrink 和 flex-basis 的简写。默认为 0 1 自动。

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

自我对齐

覆盖容器的align-items属性以定义单个项目在横轴上的对齐方式。可选值与align-items相同。

.item {
    order: <integer>;
}
</integer>

网格 网格布局

显示：网格；

打开网格布局模式。将一个元素设置为 Grid 容器，其直接子元素将成为 Grid 项（单元格）。

.item {
    flex-grow: <number>; /* Default is 0 */
}
</number>

网格模板列和网格模板行

定义网格的列轨道和行轨道的大小。接受长度、百分比、fr（分数单位，表示网格空间的分数）或auto值。您还可以使用repeat()函数创建重复轨道，并使用minmax()函数定义轨道的最小和最大尺寸。

.item {
    flex-shrink: <number>; /* defaults to 1 */
}
</number>

网格模板区域

通过命名项目并用字符串描述网格结构来定义网格布局的区域。项目名称使用 .代表一个空白单元格。

.item {
    flex-basis: <length> | <percentage> | auto | content;
}
</percentage></length>

网格间隙或网格列间隙和网格行间隙

设置网格中项目之间的间隙。接受长度或百分比值。

.container {
    display: flex;
}

网格自动列和网格自动行

定义自动填充网格时新添加的行或列的轨道大小。当项目超出定义的网格范围时生效。

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

网格自动流

控制网格项目如何自动填充和排列。可选值：

• 行（默认）：按行填充。
• 列：按列填写。
• dense：当row或column与dense一起使用时，如果网格中有间隙，新的项目将尝试填充这些间隙，而不是仅仅将它们添加到网格的末尾。

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

网格列开始、网格列结束、网格行开始和网格行结束

手动指定网格中项目的开始和结束位置。

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

网格区域

同时设置 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写属性，或引用 grid-template-areas 中定义的区域名称。

.container {
    align-items: stretch | flex-start | flex-end | center | baseline;
}

CSS Grid 与 Flexbox 结合

在某些情况下，我们可以结合 CSS Grid 和 Flexbox 的优点来创建更复杂的响应式布局。

.container {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}

首先，CSS Grid 用于创建具有自适应列宽的网格布局。每个网格项（子元素）都使用内部的 Flexbox 来垂直居中内容。当屏幕宽度小于 768px 时，媒体查询切换为单列布局以适应移动设备。

Flexbox 与网格选择

选择使用 Flexbox 还是 Grid 通常取决于具体需求：

• Flexbox适合处理一维布局，例如行或列中的元素排列，以及元素对齐和填充。
• CSS Grid 更适合处理二维布局，例如表格或复杂的网格布局，以及精确的单元格控制。

以上是CSS Flexbox 和 Grid：构建响应式布局的艺术的详细内容。更多信息请关注PHP中文网其他相关文章！