display:flex的常用布局记录【css】
以下是一些常见的 `display: flex` 子元素布局示例的 `CSS` 代码。 ## 1.
渲染中...
以下是一些常见的 `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` 可以实现的常见布局方式,可以根据具体需求调整和组合这些布局属性。END
评论
登录后查看和发表评论
前往登录