前端 - 为何设置`display: 'flex', alignItems: 'center'`之后，子标签不能正常的浮动了？

Question

我有如下代码：

<div style={{
    textAlign: 'left',
    height: '40px',
    }}>
    <label style={{float: 'left'}}>{props.title}</label>
    <input style={{float: 'right'}} placeholder='搜索:'></input>
</div>

我想要div里面的子标签垂直居中：

然后我设置：display: 'flex', alignItems: 'center'

<div style={{
                textAlign: 'left',
                height: '40px',
                display: 'flex',
                alignItems: 'center'
                }}>
                <label style={{float: 'left'}}>{props.title}</label>
                <input style={{float: 'right'}} placeholder='搜索:'></input>
            </div>

可以做到垂直居中了，但是可是input组件不右浮动了。

Answer 1

因为 float 跟 flex 本身就不是一个时代的东西，自然不能共存。首先，建议你好好了解一下 flex 布局。

此时你有几个选择：

1. 使用 flex，调整主轴（默认为横向）布局，比如 justify-content: space-between 或者右边的元素 margin-left: auto
2. 使用 position: absolute 固定位置
3. 回到过去