css - Flex布局问题


header是用的flex布局,想要搜索框水平居中,类似原生IOS里面的布局


不受左右两边内容的影响,依然水平居中
我记得我之前实现过,后来用了flex.css就忘了,麻烦看看用这个怎么实现

提问者曾经蜡笔没有小新提问时间:2017-05-19 10:47我来回答
4回答
我想大声告诉你
回复我想大声告诉你赞同05个月前

中间那个就用绝对定位,左右边宽度不一样的话会影响中间位置

.search {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
    伊谢尔伦
    回复伊谢尔伦赞同05个月前

    主要用到 align-items: center 即可
    这是demo

      阿神
      回复阿神赞同05个月前

      只有三个元素可以直接用 space-between 撑开

      https://jsfiddle.net/straybug...


      你后来更新的

      不受左右两边内容的影响,依然水平居中

      既然不受影响那么只能是 absolute 抽离出来再居中了。

      https://jsfiddle.net/straybug...

        仅有的幸福
        回复仅有的幸福赞同05个月前
        .header{
            display:flex;
            flex-flow:row nowrap;
            align-item:center;
            justify-content:space-around;
        }

        详细了解Flex布局见:http://www.ruanyifeng.com/blo...