Flex 布局中，为什么子元素无法浮动？

从现在开始，我们要努力学习啦！今天我给大家带来《Flex 布局中，为什么子元素无法浮动？》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

为什么 flex 布局中子元素无法浮动？

问题：

如图所示，我们想要垂直居中放置两个子元素，但使用 display: 'flex' 和 alignitems: 'center' 后，右侧的 input 元素无法右浮动了。

<div style={{
    textalign: 'left',
    height: '40px',
    display: 'flex',
    alignitems: 'center'
}}>
    <label style={{float: 'left'}}>标题</label>
    <input style={{float: 'right'}} placeholder='搜索:'>
</div>

解答：

float 和 flex 是两个不同的布局方式，无法共存。为了实现垂直居中，我们建议使用以下方式：

1. 使用 flex 布局：
   调整主轴布局，例如：

   justify-content: space-between

   或在右侧元素上设置：

   margin-left: auto

2. 使用绝对定位：

   position: absolute

3. 放弃 float 布局：
   完全改用 flex 布局。

好了，本文到此结束，带大家了解了《Flex 布局中，为什么子元素无法浮动？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！