2024-07-22
温故知新
00
请注意,本文编写于 79 天前,最后修改于 79 天前,其中某些信息可能已经过时。

目录

1. 水平居中
2. 垂直居中
3. 水平和垂直居中
4. 水平分布(均匀分布)
5. 垂直排列
6. 水平和垂直均匀分布
7. 子元素自适应宽度

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

如果对你有用的话,可以打赏哦
打赏
ali pay
wechat pay

本文作者:DingDangDog

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!