css – Problem mit dem Flex-Layout

Question

Der Header verwendet ein Flex-Layout. Ähnlich wie das Layout in nativem IOS wird es nicht durch den Inhalt auf der linken und rechten Seite beeinflusst. Es ist immer noch horizontal zentriert Vorher, aber dann habe ich es vergessen, nachdem ich flex.css verwendet habe. Schauen wir uns mal an, wie man das implementiert

仅有的幸福 · Answer

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

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

阿神 · Answer

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

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

你后来更新的

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

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

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

伊谢尔伦 · Answer

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

我想大声告诉你 · Answer

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

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