css灵活布局代码

CSS的灵活布局可以通过Flexbox和Grid来实现。以下是使用Flexbox和Grid进行灵活布局的代码示例：

Flexbox布局：

.container {
  display: flex;
}

.item {
  flex: 1;
}

在上述代码中，通过将容器的display属性设置为flex，容器内的子元素就会按照一定的规则进行排列。通过将子元素的flex属性设置为1，可以平均分配剩余空间给每个子元素。

Grid布局：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  grid-column: span 1;
}

在上述代码中，通过将容器的display属性设置为grid，容器内的子元素将会以网格形式进行排列。通过grid-template-columns属性设置每列的宽度，repeat函数可以指定重复的次数并设置单位。通过grid-gap属性可以设置行和列之间的间距。通过grid-column属性可以指定子元素所占据的列数。

以上代码只是灵活布局的简单示例，实际应用中根据具体需求可以调整各个属性值和添加其他样式来实现更多样化的布局效果。