国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

css - Flex layout issue
曾經(jīng)蠟筆沒(méi)有小新
曾經(jīng)蠟筆沒(méi)有小新 2017-05-19 10:47:50
0
4
1148


The header uses flex layout. I want the search box to be horizontally centered, similar to the layout in native IOS


It is not affected by the content on the left and right sides, and is still horizontally centered
I remember that I implemented it before, but then I forgot about it when I used flex.css. Please see how to achieve it with this

曾經(jīng)蠟筆沒(méi)有小新
曾經(jīng)蠟筆沒(méi)有小新

reply all(4)
僅有的幸福
.header{
    display:flex;
    flex-flow:row nowrap;
    align-item:center;
    justify-content:space-around;
}

To learn more about Flex layout, please see: http://www.ruanyifeng.com/blo...

阿神

Only three elements can be spread directly using space-between

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


You updated later

Not affected by the content on the left and right, still horizontally centered

Since it is not affected, the only way is to extract the absolute and then center it.

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

伊謝爾倫

Mainly use align-items: center
This is a demo

我想大聲告訴你

Use absolute positioning for the middle one. If the left and right widths are different, it will affect the middle position

.search {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template