CSS flexbox如何让带图标的密码输入框与其他输入框对齐？有哪些其他方案？

你遇到的对齐问题可以通过以下方案解决：

关于前缘对齐的支持说明 #

Flex布局完全支持你所说的「基于元素前缘对齐」的特性，对应align-items属性的flex-start值，该值会让容器内的所有子元素按照交叉轴的起始边缘对齐，而非中心点对齐。

最优解决方案（改动最小） #

你当前的错位问题根源是：密码行的父容器总宽度为「200宽输入框 + 图标宽度」，比其他200宽的普通输入框更宽，主容器设置alignItems: center会让所有子元素按中心点对齐，最终导致密码输入框的左边缘和其他输入框错位。
只要统一密码行容器和普通输入框的规格即可解决，无需修改主容器的对齐规则：

1. 给passwordInputContainer设置和普通输入框一致的width: 200、margin: 10
2. 把passInput的固定宽度width: 200改为flex: 1，让输入框自动占满容器内除图标外的剩余空间

修改后的样式代码如下：

const styles = StyleSheet.create({
container:{
    flex: 1,
    flexDirection: 'column',
    height: 'height',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#cffcff',
},
// 主输入框样式
input:{
    width: 200,
    height: '5%',
    backgroundColor: 'white',
    margin: 10,
    paddingLeft: 10,
    borderRadius: 15,
},
// 密码输入框样式
passInput:{
    flex: 1, // 替换原有固定宽度200
    backgroundColor: 'white',
    paddingLeft: 10,
    borderRadius: 15,
},
passwordInputContainer:{
    flexDirection: 'row',    
    height: '5%',
    width: 200, // 和普通输入框宽度保持一致
    margin: 10, // 和普通输入框外边距保持一致
}
})

基于flex-start的前缘对齐方案 #

如果你需要所有输入框左边缘对齐、整体表单仍在页面居中显示，可以使用flex-start实现：

• 新增一个中间容器包裹所有表单元素，给该容器设置alignItems: 'flex-start'
• 原主容器保留justifyContent: center、alignItems: 'center'配置，让中间容器整体在页面居中即可。

内容的提问来源于stack exchange，提问作者James Ratcliffe