弹性布局：
CSS 弹性布局是一种灵活的布局方式，它可以自适应不同屏幕大小和设备类型。 弹性布局基于容器和项目之间的关系来工作。 在弹性布局中，容器包含若干个项目（即子元素），并通过定义弹性容器的属性来确定项目如何布局。
display: flex;定义一个弹性容器flex-direction: row | row-reverse | column | column-reverse;定义弹性容器中项目的排列方向。justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right;定义项目在主轴上的对齐方式。align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end | safe center | unsafe center;定义项目在交叉轴上的对齐方式。align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly | baseline | first baseline | last baseline | start | end | safe center | unsafe center;定义多行项目在交叉轴上的对齐方式。
项目属性
以下是常用的弹性项目属性：
order: <integer>;定义项目的显示顺序。flex-grow: <number>;定义项目在剩余空间中所占的比例。flex-shrink: <number>;定义项目在空间不足时所占的比例。flex-basis: <length> | auto;定义项目在空间分配前的大小。flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];定义项目的flex-grow、flex-shrink和flex-basis属性。align-self: auto | flex-start | flex-end | center | baseline | stretch;定义单个项目在交叉轴上的对齐方式。
示例
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div>
.container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .item { flex: 1; }
CSS网格布局是一种新的布局方式，旨在更好地实现复杂的页面布局。它基于一个二维网格系统，可以通过定义行和列来创建网格区域，然后将内容放置在这些区域中。
以下是CSS网格布局的一些主要特点：
- 网格容器：用于定义网格的外部容器。
- 网格线：分为水平和垂直方向的线，用于划分行和列。
- 网格单元格：网格中的每个区域都被称为单元格，可以跨越多个行和列。
- 网格轨道：由网格线形成的水平或垂直通道。
- 网格间距：网格线之间的空间。
下面是一个简单的 CSS 网格布局示例：
css复制代码
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 10px;
}
.item-a {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
.item-b {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.item-c {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-d {
grid-column: 3 / 4;
grid-row: 1 / 3;
}
在上面的示例中，我们创建了一个网格容器，并定义了三列和两行。然后我们使用 grid-column 和 grid-row 属性来指定每个单元格的位置。最后，我们使用 grid-gap 属性来定义网格之间的间距。
总之，CSS 网格布局是一种十分强大的页面布局方式，它可以让我们更好地掌控页面结构，提高开发效率。
