移动WEB开发flex布局
Flex布局是CSS3中的一种新布局模式，它允许开发者通过简单的CSS属性来控制容器内部组件的排列方式。在移动Web开发中，Flex布局非常实用，因为它可以使应用程序在不同的屏幕尺寸和设备上保持一致的布局。
以下是一个简单的Flex布局示例，它将创建一个水平居中的容器，其中包含三个等宽的子元素：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex; /* 使用Flex布局 */
justify-content: center; /* 水平居中 */
}
.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 类定义了子元素的宽度、高度和外边距。justify-content: center 则使得所有子元素在容器中水平居中。
评论已关闭