css - Problème de mise en page Flex

Question

L'en-tête utilise une disposition flexible. Je souhaite que le champ de recherche soit centré horizontalement, similaire à la disposition dans IOS natif.

---

Il n'est pas affecté par le contenu sur les côtés gauche et droit, il est toujours centré horizontalement

Je me souviens de l'avoir déjà implémenté, mais je l'ai ensuite oublié lorsque j'ai utilisé flex.css. Veuillez voir comment y parvenir en utilisant ceci.

Answer 1

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

Pour en savoir plus sur la mise en page Flex, veuillez consulter : http://www.ruanyifeng.com/blo...

Answer 2

Seuls trois éléments peuvent être répartis directement en utilisant l'espace entre

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

---

Ce que vous avez mis à jour plus tard

n'est pas affecté par le contenu sur les côtés gauche et droit, et est toujours centré horizontalement

Comme il n'est pas affecté, la seule option est d'extraire l'absolu puis de le centrer.

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

Answer 3

Utilisez principalement align-items: center
Ceci est une démo

Answer 4

Utilisez un positionnement absolu pour celui du milieu. Si les largeurs gauche et droite sont différentes, cela affectera la position médiane

.

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