centre seul article dans un conteneur flexible

Comment puis-je centrer .search comme seul article dans un conteneur .flex?centre seul article dans un conteneur flexible

body{ 
 
    background-color:green; 
 
} 
 

 
.bar{ 
 
    background-color:yellow; 
 
    display:flex; 
 
    justify-content: space-between; 
 
} 
 

 
.search{ 
 
    background-color:red; 
 
    align-self: center; 
 
}

<body> 
 
    <div class="bar"> 
 
     <div class="search"> 
 
      <input type="search" placeholder="Search" /> 
 
      <button id="cancel">Cancel</button> 
 
     </div> 
 
    </div> 
 
</body>

Il fonctionne quand j'ajouter d'autres articles:

body { 
 
    background-color:green; 
 
} 
 
.bar { 
 
    background-color:yellow; 
 
    display:flex; 
 
    justify-content: space-between; 
 
} 
 
.search { 
 
    background-color:red; 
 
    align-self: center; 
 
}

<body> 
 
    <div class="bar"> 
 
     <div class="menu"><a href="#">menu</a> 
 

 
     </div> 
 
     <div class="search"> 
 
      <input type="search" placeholder="Search" /> 
 
      <button id="cancel">Cancel</button> 
 
     </div> 
 
     <div class="closebar"><a href="#">close</a> 
 

 
     </div> 
 
    </div> 
 
</body>

Mais pourquoi travaille-t-il quand il y a d'autres éléments?

Source

2014-09-18 Thomas Stock

Il fonctionne si vous spécifiez la valeur auto pour la marge gauche et à droite à l'élément .search:

body { 
 
    background-color:green; 
 
} 
 
.bar { 
 
    background-color:yellow; 
 
    display:flex; 
 
    justify-content: space-between; 
 
} 
 
.search { 
 
    background-color:red; 
 
    align-self: center; 
 
    margin: 0 auto; 
 
}

<body> 
 
    <div class="bar"> 
 

 
     <div class="search"> 
 
      <input type="search" placeholder="Search" /> 
 
      <button id="cancel">Cancel</button> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
</body>

Source

2014-09-18 07:31:43 fcalderan

Connaissez-vous la raison sous-jacente? –

nevermind, regardé dans "marge: 0 auto" un peu et je pense que je comprends. Le navigateur maximise les marges, non? –

Set justify-content: center; au lieu de justify-content: space-between;

body{ 
 
    background-color:green; 
 
} 
 

 
.bar{ 
 
    background-color:yellow; 
 
    display:flex; 
 
    justify-content: center; 
 
} 
 

 
.search{ 
 
    background-color:red; 
 
    align-self: center; 
 
}

<body> 
 
    <div class="bar"> 
 
     <div class="search"> 
 
      <input type="search" placeholder="Search" /> 
 
      <button id="cancel">Cancel</button> 
 
     </div> 
 
    </div> 
 
</body>

Pour plus d'informations:

Mozilla MDN - justify-content

Source

2014-09-18 07:38:51 Anonymous

Merci, cela fonctionne aussi, mais je préfère l'autre solution. Upvoted. –

centre seul article dans un conteneur flexible

Répondre

Questions connexes