如何调整Div使其不横向铺满整个浏览器窗口？

你的flex容器默认会占满父元素的全部可用宽度，这就是导致横向铺满浏览器的原因。可以通过以下修改解决：

关键修改步骤 #

• 给容器添加max-width（或width）限制横向宽度，避免撑满整个浏览器
• 将左右margin设为auto，实现容器自身水平居中（替代justify-content: center，后者是控制容器内子元素的对齐）
• 推荐使用box-sizing: border-box，让边框和内边距不会额外增加容器宽度

修改后的CSS代码示例 #

display          : flex; 
flex-direction   : column; /* 适配表单垂直布局，可根据实际调整 */
align-items      : center; 
margin           : 140px auto 125px auto;  
max-width        : 400px; /* 可根据需求调整宽度数值 */
box-sizing       : border-box; 
border           : solid #2356a7 10px;
padding          : 20px 5px; 
border-radius    : 20px; 
background-color : #f4f4f4;

说明 #

• max-width：让容器在大屏幕上不会过宽，小屏幕上自动适配宽度
• margin: ... auto：利用自动外边距实现容器水平居中，比justify-content更适合控制容器自身的位置
• flex-direction: column：如果你的表单元素是垂直排列的，这个属性能让内部元素按垂直方向分布，配合align-items: center让子元素水平居中

内容的提问来源于stack exchange，提问作者sarah galed