web前端开发—Flex布局
warning:
这篇文章距离上次修改已过441天，其中的内容可能已经有所变动。
Flex布局是CSS布局的一种方法，可以简化布局过程。Flex布局可以使容器内的子元素可以根据可用空间自由伸缩。
以下是一个简单的Flex布局示例，实现一个容器内水平居中的子元素：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex; /* 使用Flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 高度设置为视口高度 */
}
.flex-item {
margin: 10px; /* 子元素外边距 */
padding: 20px; /* 子元素内边距 */
background-color: #f9f9f9; /* 背景色 */
text-align: center; /* 文本居中 */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Flex Item 1</div>
<div class="flex-item">Flex Item 2</div>
<div class="flex-item">Flex Item 3</div>
</div>
</body>
</html>在这个例子中，.flex-container 类使用 display: flex 属性启用Flex布局，并使用 justify-content: center 和 align-items: center 分别实现水平和垂直居中。.flex-item 类则定义了子元素的外边距、内边距、背景色和文本居中。
评论已关闭