【CSS】深入浅出弹性布局
弹性布局（Flexible Layout）是CSS3的一个布局模块，主要用来提供一个更为有效的方式制定、调整和分布一个容器内部的项目布局。
以下是一个简单的弹性布局示例，创建一个水平居中的容器，其中包含三个等宽的子元素：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex; /* 指定为弹性布局 */
width: 100%; /* 容器宽度 */
background-color: lightgrey; /* 背景颜色 */
}
.flex-item {
background-color: cornflowerblue; /* 子元素背景颜色 */
width: 100px; /* 子元素宽度 */
margin: 5px; /* 子元素外边距 */
text-align: center; /* 文字居中 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
</body>
</html>在这个例子中，.flex-container 类使用 display: flex 属性将一个div标签指定为弹性容器。.flex-item 类的三个子元素将会等宽，并且水平居中分布在弹性容器中，因为容器默认将项目沿主轴（main axis）对齐。
评论已关闭