با سلام ببخشید من این فرم پاپ آپ رو تا اینجا درست کردم، و از flexbox برای ترازبندی صفحه استفاده کردم اما برای قرار گرفتن فیلد ها زیر یکدیگر (مثل block display) به مشکل برخوردم، display فیلد ها رو هم به block تغییر دادم ولی هیچ فرقی نکرد، با اضافه کردن تگ br هم جوابی نگرفتم میشه لطفا راهنمایی کنید؟ممنون میشم
مخصوص اعضای ویژه 
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>POPUP</title>
<style>
body {
margin: 0;
padding: 0;
}
.input {
display: flex;
background-color: rgb(253, 253, 253);
border: none;
border-radius: 5px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 12px;
margin: 10px;
}
.pcon {
background-color: #fff;
width: 30%;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-shadow: 0 0 12px 3px #646464;
flex-wrap: wrap;
}
.pb {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.login {
border: none;
color: rgb(255, 255, 255);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
padding: 7px 12px;
border-radius: 7px;
cursor: pointer;
text-align: center;
background-color: rgb(87, 50, 255);
}
</style>
</head>
<body>
<button class="login">ورود</button>
<div class="pb">
<div class="pcon">
<input type="text" placeholder="نام کاربری" class="input">
<input type="password" placeholder="پسورد" class="input" id="pass">
<button class="login">ورود</button>
</div>
</div>
</body>
</html>
با سلام خدمت شما همراه عزیز
میتونید از فلکس باکس و column استفاده کنید
