web前端开发—Flex布局
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
类则定义了子元素的外边距、内边距、背景色和文本居中。
评论已关闭