Safari 9 - flexbox align-self: flex-end funktioniert nicht

Ich habe Probleme, Kind-Element an das Ende des übergeordneten Elements auszurichten. Beide sind Flexelemente. Das Elternelement hat eine Höhe von 100% und das Kind hat: align-self: flex-end. Dieses Setup funktioniert in allen gängigen Browsern (Firefox, Chrome, IE/Edge), funktioniert aber nicht in Safari 9 (und einigen älteren Versionen, die auch flexbox unterstützen).Safari 9 - flexbox align-self: flex-end funktioniert nicht

Hier ist, wie es aussieht: screenshot of the problem

Hier copy-paste Beispiel können Sie sehen, es funktioniert in Chrome, aber in Safari seine in der Mitte:

http://cdpn.io/usrbowe/pen/JXBjvv

Das Problem ist, dass Bei .Row ist align-items: center, das in Safari eine höhere Priorität hat, so dass das untergeordnete Element in der Mitte ausgerichtet wird.

Quelle

2016-04-21 usrbowe

Es wäre besser, wenn Sie ein funktionierendes Beispiel einfügen könnten, um es zu beweisen. –

ok, ich habe Arbeitsbeispiel in Codepen hinzugefügt – usrbowe

Fragen, die Code-Hilfe suchen, müssen den kürzesten Code enthalten, der notwendig ist, um ** in der Frage selbst zu reproduzieren **. Obwohl Sie einen [** Link zu einem Beispiel oder einer Site ** angegeben haben] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-einfügen-a-link-to-it), sollte die Verknüpfung ungültig werden, würde Ihre Frage keinen Wert für andere zukünftige SO-Benutzer mit dem gleichen Problem haben. –

Nachdem ich den Großteil des Codes entfernt hatte, der nicht mit dem Problem zusammenhing, wurde mir klar, dass es nicht align-items war, was Ihnen hier Probleme bereitet. Es ist align-content, die align-self nicht überschreibt. Sie erwähnten align-items: center; hatte Vorrang, aber in dem Beispiel haben Sie align-items: flex-start; überschreiben center bereits. Egal, das ist nicht das Problem.

Es scheint jedoch eine Browser-Eigenart zu sein. Laut der vertrauenswürdigen flexbox spec (und my favorite flex guide) align-content sollte keine Auswirkungen auf ein Single-Line-Flex-Container haben. Aus irgendeinem Grund in Safari ist es jedoch.

Angesichts des Beispiels, schlage ich vor, Sie entfernen align-content insgesamt. Es scheint nicht so zu sein, als ob man etwas auf der Querachse zentrieren möchte. Der im Beispiel verwendete Inhalt unterstützt diese Theorie ebenfalls. Wenn das nicht stimmt und andere Inhalte beteiligt sein sollten, die eine Rolle spielen, aktualisieren Sie das Codebeispiel.

Quelle

2016-04-22 15:51:38 alexbea

Ich habe versehentlich meine Codepen-Demo gelöscht. Reproduziert hier: https://codepen.io/alexbea/pen/RpaNQq – alexbea

Safari 9 - flexbox align-self: flex-end funktioniert nicht

Antwort

Verwandte Themen