CSS弹性布局

作者：System 时间：2024年08月14日分类：所有,css 字数：721

CSS弹性布局（Flexible Layout）是一种现代化的布局方式，可以简便高效地创建复杂的布局结构。

以下是一个简单的弹性布局示例，创建一个水平居中的容器，其中包含三个子元素，每个子元素都会自动伸缩以填满可用空间：




<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex; /* 指定为弹性布局 */
  justify-content: center; /* 水平居中子元素 */
}
 
.flex-item {
  flex: 1; /* 子元素均匀伸缩 */
  padding: 10px;
  margin: 5px;
  background-color: lightblue;
}
</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 属性将容器指定为弹性布局。.flex-item 类使用 flex: 1 属性使得每个子元素可以自动伸缩，平分容器的水平空间。justify-content: center 属性确保子元素水平居中。

CSS弹性布局

评论已关闭

推荐阅读