Float funktioniert nicht in einem Flex-Container

Ich möchte Text (foo Link) in der rechten Fußzeile Element positionieren.Float funktioniert nicht in einem Flex-Container

Ich brauche Fußzeile Display zu bleiben flex.

Aber wenn ich es auf flex setzen, funktioniert float:right für Span nicht mehr.

<footer style="display: flex;"> 
 
    <span style="text-align: right;float: right;"> 
 
     <a>foo link</a> 
 
    </span> 
 
</footer>

https://jsfiddle.net/dhsgvxdx/

Quelle

2016-08-28 somename

Siehe [Welche CSS-Regeln ignoriert werden, wenn Flexbox aktiv ist?] (Http://stackoverflow.com/q/30500734/1529630) – Oriol

Die float Eigenschaft in einem flexiblen Behälter ignoriert.

Von der Flexbox Spezifikation:

3. Flex Containers: the flex and inline-flex display values

A flex Behälter einen neuen flex Formatierungskontext für seine Inhalte festlegt. Dies entspricht dem Erstellen eines Blockformatierungskontextes, , mit der Ausnahme, dass das Flex-Layout anstelle des Blocklayouts verwendet wird.

Zum Beispiel dringen Floats nicht in den Flex-Container ein, und die Ränder des Flex-Containers kollabieren nicht mit den Rändern seines Inhalts.

float und clear erzeugen Sie kein Floating oder Clearance des Flex Items, und nehmen Sie es nicht out-of-flow.

Stattdessen nur flex Eigenschaften verwenden:

footer { 
 
    display: flex; 
 
    justify-content: flex-end; 
 
}

<footer> 
 
    <span> 
 
     <a>foo link</a> 
 
    </span> 
 
</footer>

Wenn Sie mehr Einzelteile in der Fußzeile haben, und müssen andere Optionen Ausrichtung, dann sind hier zwei Führungen:

Quelle

2016-08-28 19:03:07

dieser Link http://stackoverflow.com/a/33856609/3597276 war super. – somename

Es funktioniert, wenn Sie margin-left: auto; hinzufügen, wie ich hier im jsfiddle tat: https://jsfiddle.net/dhsgvxdx/3/

<body> 
    <footer style="display: flex;"> 
     <span style="text-align: right;float: right; margin-left: auto;"> 
      <a>foo link</a> 
     </span> 
    </footer> 
</body>

Quelle

2016-08-28 18:47:28

ja es funktioniert. tnx – somename

Ich kenne seine späte Antwort, aber es wird anderen helfen ..Wenn Sie 'margin-left: auto' verwenden, müssen Sie nicht die Eigenschaft' float: right' verwenden ....! In meinem Fall hat es ohne es funktioniert. –

Wenn diese Fußzeile nur eine rechts- enthalten ausgerichtetes Element, können Sie einfach justify-content: flex-end auf den Flex-Container anwenden. Auf diese Weise müssen Sie den untergeordneten Elementen keine Stile hinzufügen.

footer { 
    display: flex; 
    justify-content: flex-end; 
}

Codepen example

Quelle

2016-08-28 18:52:41 alanbuchanan

ja. ich versuche es. es funktioniert in einigen Fällen. aber in meinem Fall habe ich ein Element, das links von der Fußzeile sein muss. und einige im Recht. – somename

In diesem Fall verwenden Sie 'justify-content: space-between' auf dem Container - keine Notwendigkeit für Floats oder Text-Aligns. – alanbuchanan

hmmm. Ich teste es. Das ist so gut. auf diese Weise werden Elemente automatisch ausgerichtet. tnx – somename

Float funktioniert nicht in einem Flex-Container

Antwort

Verwandte Themen