<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.form-container {
display: flex;
flex-direction: column;
align-items: center;
max-width: 600px;
margin: auto;
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
.form-group label {
margin-bottom: 5px;
}
.form-group input,
.form-group select {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
.form-group.button-group {
flex-direction: row;
align-items: center;
}
.form-group button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
cursor: pointer;
margin-right: 10px;
}
@media (max-width: 600px) {
.form-group.button-group {
flex-direction: column;
align-items: flex-start;
}
.form-group button {
margin-right: 0;
margin-bottom: 10px;
}
}
</style>
<title>更复杂的 Flex 表单</title>
</head>
<body>
<div class="form-container">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="gender">性别：</label>
<select id="gender" name="gender">
<option value="male">男性</option>
<option value="female">女性</option>
</select>
</div>
<div class="form-group button-group">
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</div>
</body>
</html>
在这个例子中，.form-container 仍然使用了 Flex 布局，但现在它还包括了一些更多的属性。.form-group 类表示每个表单组元素，它们也使用了 Flex 布局，以使标签和输入框垂直排列。.form-group.button-group 类则使提交按钮和重置按钮水平排列。
通过使用 @media 查询，我们还添加了一个媒体查询，以在屏幕宽度小于或等于600px时进行调整。在这种情况下，按钮将垂直排列，并且按钮组的对齐方式会更改为 flex-start，使其靠左对齐。
这只是一个示例，你可以根据实际需求和设计要求进一步调整样式和布局。
转载请注明出处：http://www.zyzy.cn/article/detail/10780/Flex