Stellen Sie sicher, dass Flex-Elemente die Inhaltsbreite und nicht die Breite des übergeordneten Containers annehmen

Ich habe einen Container <div>mit display: flex. Es hat ein Kind <a>.

Wie kann ich das Kind "inline" erscheinen lassen?

Wie kann ich insbesondere die Breite des Kindes durch seinen Inhalt bestimmen und nicht auf die Breite des Elternteils erweitern?

Was ich versucht habe:

Ich stellte das Kind auf display: inline-flex, aber es nahm immer noch die volle Breite ein. Ich habe auch alle anderen Anzeigeeigenschaften ausprobiert, aber nichts hatte einen Effekt.

Beispiel:

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

http://codepen.io/donpinkus/pen/YGRxRY

Verwenden Sie es align-items: flex-startauf dem Behälter oder align-self: flex-startauf den flexiblen Gegenständen.

Keine Notwendigkeit für display: inline-flex.

Eine Grundeinstellung eines Flexcontainers ist align-items: stretch. Dies bedeutet, dass sich flexible Elemente ausdehnen, um die gesamte Länge des Containers entlang der Querachse abzudecken.

Die align-selfEigenschaft macht dasselbe wie align-items, außer dass dies align-selffür Flex-Elementealign-items gilt, während dies für den Flex-Container gilt .

Erbt standardmäßig align-selfden Wert von align-items.

Da sich Ihr Container befindet flex-direction: column, ist die Querachse horizontal und align-items: stretcherweitert die Breite des untergeordneten Elements so weit wie möglich.

Sie können die Standardeinstellung mit align-items: flex-startfür den Container (der von allen Flex-Elementen geerbt wird) oder align-self: flex-startfür das Element (das auf das einzelne Element beschränkt ist) überschreiben .

Weitere Informationen zur Flexausrichtung entlang der Querachse finden Sie hier:

• Wie funktioniert Flex-Wrap mit Align-Self, Align-Items und Align-Content?

Weitere Informationen zur Flexausrichtung entlang der Hauptachse finden Sie hier:

• Warum gibt es in CSS Flexbox keine Eigenschaften "Elemente rechtfertigen" und "Selbst rechtfertigen"?

Zusätzlich align-selfkönnen Sie auch den automatischen Rand berücksichtigen, der fast dasselbe bewirkt

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>