使用 Flex 布局設計登錄頁是一種簡單而靈活的方式，讓頁面在不同屏幕大小下都能有良好的布局。以下是一個簡單的例子，演示如何使用 Flex 布局設計登錄頁：
HTML 結構：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>Login Page</title>
</head>
<body><div class="login-container"><div class="login-box"><h2>Login</h2><form action="#"><label for="username">Username:</label><input type="text" id="username" name="username" required><label for="password">Password:</label><input type="password" id="password" name="password" required><button type="submit">Login</button></form></div></div>
</body>
</html>
CSS 樣式（styles.css）：
body {margin: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;
}.login-container {width: 100%;max-width: 400px;
}.login-box {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}h2 {text-align: center;color: #333;
}form {display: flex;flex-direction: column;
}label {margin-bottom: 8px;color: #555;
}input {padding: 10px;margin-bottom: 16px;border: 1px solid #ccc;border-radius: 4px;
}button {padding: 12px;background-color: #007bff;color: #fff;border: none;border-radius: 4px;cursor: pointer;
}
在這個例子中：
1、使用 display: flex 將 body 設置為彈性容器，通過 justify-content 和 align-items 居中頁面內容。
2、.login-container 作為登錄容器，使用 max-width 限制其最大寬度，并使其在小屏幕上保持 100% 寬度。
3、.login-box 是登錄框，具有一些基本的樣式，如背景顏色、內邊距、圓角和陰影。
4、表單內的元素使用 Flex 布局來垂直排列，flex-direction: column。
5、表單元素（label、input、button）都有一些基本的樣式，如間距、邊框、邊框半徑等。
這只是一個簡單的例子，你可以根據具體需求進行修改和擴展。Flex 布局的優勢在于它提供了一種簡便的方式來創建響應式和靈活的布局。
