display:flex的常用布局记录【css】

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

## 1. 水平居中
```css
.container {
    display: flex;
    justify-content: center;
}

.item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
}
```
<!-- more -->

## 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` 可以实现的常见布局方式，可以根据具体需求调整和组合这些布局属性。