flex伸缩布局看着一篇就够啦
在Flex布局中，通过设置容器的display属性为flex或inline-flex，可以创建一个灵活的布局模型。以下是一个简单的Flex布局示例，它演示了如何使用Flex布局来排列子元素：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex; /* 或者 inline-flex */
flex-direction: row; /* 默认值，也可以是 column 或 row-reverse 或 column-reverse */
flex-wrap: wrap; /* 允许换行 */
justify-content: flex-start; /* 水平方向上的对齐方式 */
align-items: center; /* 垂直方向上的对齐方式 */
}
.flex-item {
margin: 5px; /* 为了更好的展示效果，给每个子元素加上一点外边距 */
padding: 10px; /* 填充也可以让子元素更容易看清楚 */
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 类使得容器使用Flex布局，.flex-item 类使得所有子元素有相同的样式。通过调整Flex容器的属性，可以控制布局的方向、换行、对齐等方面。
评论已关闭