/* 使用弹性盒子(Flexbox)布局的示例 */
/* 定义一个容器为弹性盒子 */
.container {
display: flex; /* 将容器设置为弹性盒子 */
justify-content: center; /* 主轴上居中对齐子元素 */
align-items: center; /* 交叉轴上居中对齐子元素 */
height: 300px; /* 设置容器高度 */
border: 1px solid black; /* 添加边框以便观察效果 */
}
/* 定义子元素的样式 */
.item {
width: 100px; /* 设置子元素宽度 */
height: 100px; /* 设置子元素高度 */
background-color: lightblue; /* 设置背景颜色 */
margin: 10px; /* 设置外边距 */
}
display: flex;
:将容器设置为弹性盒子,使其内部的子元素按照弹性盒子的规则进行排列。justify-content: center;
:在主轴(默认是水平方向)上居中对齐子元素。align-items: center;
:在交叉轴(垂直方向)上居中对齐子元素。.item
:定义了容器内的子元素样式,包括宽度、高度、背景颜色和外边距。通过这些代码,你可以创建一个简单的弹性盒子布局,其中子元素会在容器内居中显示。
上一篇:css规则
下一篇:css动画transition
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站