web-dev-qa-db-fra.com

Faire en sorte que le conteneur flexible prenne la largeur du contenu, pas la largeur 100%

Dans l'exemple ci-dessous, j'ai un bouton avec les styles suivants ...

.button-flexbox-approach {
    /* other button styles */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 2rem;
}

http://codepen.io/3stacks/pen/JWErZJ

Mais il se met automatiquement à 100% au lieu de la largeur du contenu. Vous pouvez définir une largeur explicite, mais cela ne permet pas à votre texte de se dérouler naturellement.

Comment créer un bouton dont le texte intérieur est centré avec flexbox mais dont la taille ne correspond pas à la taille du conteneur?

.container {
  width: 100%;
  height: 100%;
}

.button {
/*   Simply flexing the button makes it grow to the size of the container... How do we make it only the size of the content inside it? */
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  font-weight: normal;
  line-height: normal;
  margin: 0;
  position: relative;
  text-align: center;
  text-decoration: none;
  padding: 1rem 2rem 1.0625rem 2rem;
  font-size: 1rem;
  background-color: #D60C8B;
  border-color: #ab0a6f;
  color: #fff;
}

.one {
  margin-bottom: 1rem;
}

.two {
/* You can put an explicit width on that, but then you lose the flexibility with the content inside */
  width: 250px;
}
<div class="container">
  <p>
    Button one is flexed with no width and it grows to the size of its container
  </p>
  <p>
    <a class="button one" href="#">Button</a>
  </p>
  <p>
    Button two is flexed with an explicit width which makes it smaller, but we have no flexibility for changing the content
  </p>
  <p>
    <a class="button two" href="#">Button 2</a>
  </p>
</div>
htmlcsscss3flexboxfrontend
6
3stacks

Au lieu de display: flex sur le conteneur, utilisez display: inline-flex.

Cela fait passer le conteneur de niveau bloc (qui prend toute la largeur de son parent) à niveau en-ligne (qui prend la largeur de son contenu).

Ce comportement de dimensionnement est similaire à display: block vs display: inline-block.

Pour un problème connexe et une solution, voir:

10
Michael_B

EDIT: Michael_B a souligné dans sa réponse qu'inline-flex sur le parent est la propriété correcte pour ce cas d'utilisation. J'ai mis à jour mon blog en conséquence.

Ce n'est pas idéal, mais si vous placez le bouton dans un conteneur inline-block, le bouton s'adapte naturellement au contenu, comme suit:

.button {
  /* other button styles */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem 2rem;
}
<div style="display: inline-block;">
  <a class="button">Button</a>
</div>

Vous pouvez ensuite définir la largeur maximale sur le conteneur et le texte sera renvoyé à plusieurs lignes, tout en conservant le centrage vertical correct.

J'ai détaillé cela dans mon dernier article de blog: https://lukeboyle.com/css-buttons-solved-flexbox/

1
3stacks