CSS3-flex布局
CSS3的Flexbox布局（弹性盒子布局）提供了一种更灵活的方式来对容器内的项进行排列、对齐和分配空间。
以下是一个简单的Flex布局示例，它将创建一个水平的弹性容器，其中的子元素会自动伸缩以填满可用空间：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex; /* 使用弹性布局 */
}
.flex-item {
width: 100px; /* 设置子元素的宽度 */
height: 100px; /* 设置子元素的高度 */
margin: 5px; /* 设置子元素的外边距 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item" style="background-color: cyan;">1</div>
<div class="flex-item" style="background-color: magenta;">2</div>
<div class="flex-item" style="background-color: yellow;">3</div>
</div>
</body>
</html>在这个例子中，.flex-container 类使用 display: flex; 属性使得容器使用Flex布局。.flex-item 类设置了子元素的宽度和高度，并且每个子元素都有5像素的外边距。
Flex布局的强大之处在于它可以轻松地在容器内水平和垂直排列子元素，调整它们的大小，以及控制它们在容器内的对齐方式。
评论已关闭