首页 >CSS3讨论组 >css - Flex布局问题

css - Flex布局问题css - Flex布局问题


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


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

 
4
 
+1
-1
 
分享
全部回复 (4)我来回答
    我想大声告诉你
    0楼
    我想大声告诉你 · 7个月前

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

    .search {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

      赞+0添加回复

    伊谢尔伦
    0楼
    伊谢尔伦 · 7个月前

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

      赞+0添加回复

    阿神
    0楼
    阿神 · 7个月前

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

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


    你后来更新的

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

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

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

      赞+0添加回复

    仅有的幸福
    0楼
    仅有的幸福 · 7个月前

    .header{
        display:flex;
        flex-flow:row nowrap;
        align-item:center;
        justify-content:space-around;
    }

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

      赞+0添加回复

    首页上一页1下一页尾页