以下是一些常见的 display: flex 子元素布局示例的 CSS 代码。

1. 水平居中

css
.container {
    display: flex;
    justify-content: center;
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

2. 垂直居中

css
复制代码
.container {
    display: flex;
    align-items: center;
    height: 100vh; /* 确保容器有高度 */
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
}

3. 水平和垂直居中

css
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 确保容器有高度 */
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
}

4. 水平分布（均匀分布）

css
.container {
    display: flex;
    justify-content: space-between;
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightpink;
}

5. 垂直排列

css
.container {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 确保容器有高度 */
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightseagreen;
    margin-bottom: 10px; /* 添加间距 */
}

6. 水平和垂直均匀分布

css
.container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh; /* 确保容器有高度 */
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightskyblue;
}

7. 子元素自适应宽度

css
.container {
    display: flex;
}

.item {
    flex: 1;
    height: 100px;
    background-color: lightsteelblue;
    margin: 5px; /* 添加间距 */
}

这些示例展示了使用 display: flex 可以实现的常见布局方式，可以根据具体需求调整和组合这些布局属性。