Erledigt - Flexbox: Kombination aus flex-end und stretch?

[Jormungand]

Hallo Flexboxer,

ich stehe zur Zeit bei einem Problem auf dem Schlauch:
Bei einem zweispaltigen Text sollen die Spalten unten ausgerichtet sein.
Über Flexbox erreiche ich das ja über align-items: flex-end. Der Text läuft dann richtig.

Jetzt haben aber die Spalten eine Hintergrundfärbung die sich an die Höhe des Inhalts anpasst. Um zu erreichen, dass beide Spalten gleich hoch wären, müsste ich align-items: stretch einsetzen. Allerdings wäre dann der Text wieder oben ausgerichtet.

Gibt es eine Kombination aus den beiden Definitionen für gleichhohe Spalten aber unten ausgerichteten Texten?
Die Spalten sollten dabei keine feste Höhe haben.

Wie würdet ihr vorgehen?

Viele Grüße
Jormungand

 

[Myhar]

Gibt es zu deinem Problem auch einerseits ein Bild, wie es denn schlußendlich aussehen soll und andererseits einen Code, wie das HTML aufgebaut ist? So werde ich nämlich nicht wirklich aus deinem Post schlau und kann nur raten was du eigentlich meinst.

 

[Jormungand]

Ich habe mal in PS ein paar Bildchen vorbereitet.

Das Bild soll so werden: Beide Spalten (weiß) sind gleich lang, aber der Text ist unten ausgerichtet.


Verwende ich align-items: stretch, werden zwar die Spalten auf die gleiche Länge gezogen, aber der Text beginnt oben:


Verwende ich align-items: flex-end, beginnt der Text zwar unten, aber die Spalten sind nicht mehr gleich lang, sondern werden auf Textlänge verkleinert:

 

[Myhar]

Bilder sind hübsch und bestimmt mit viel liebe gestaltet. Aber das was für die HTML Entwicklung wichtig ist, ist der Code. Gibt es hier auch Vorgaben? Ansonsten gehe ich davon aus, dass der Code und die Struktur frei definiert werden kann.

<div>

<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et 
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus es
</p>
</div>

div {
  display: flex; 
  align-items: stretch;
}

p {width: 100px; background-color: pink; display:flex; justify-content: flex-end; flex-direction: column;}

 

[Jormungand]

Es ist ein allgemeines Problem, auf das ich immer stoße. Aber ich kann auch Code anhängen:
HTML:

<div id="wrapper">
 
  <div id="flexbox">
    <div class="spalte">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</div>
    <div class="spalte">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  </div>
</div>

CSS:

    #wrapper {
        background: #CCC;
        padding: 20px;
    }
    #flexbox {
        display: flex;
        justify-content: space-between;
    }
    .spalte {
        width: 48%;
        background: #FFF;
    }

Das ist das Ursprungsszenario. Um die beiden anderen Beispiele von oben darzustellen, muss nur in #flexbox die Zeile align-items: stretch; bzw. align-items: flex-end; eingefügt werden.

 

[Myhar]

Siehe mein edit ;-)
Wieso verwendest du divs für einen Absatz?

 

[Jormungand]

Ah jetzt ja.
Das child-Element muss auch ein display:flex; bekommen! Außerdem hast du justify-content: flex-end; dem child statt dem parent gegeben.

Ich habe mich bisher nach https://css-tricks.com/snippets/css/a-guide-to-flexbox/ als Nachschlagewerk gerichtet, aber da scheint viel falsch zu sein.

Wieso verwendest du divs für einen Absatz?

Sobald ich mehr als einen Absatz hätte, würde dafür eine neue Spalte erstellt werden. Wenn ich ein div erstelle, kann ich darin beliebig viele p, ul, h2 etc. verwenden.

Danke jedenfalls für die Info. Hast du noch eine Quelle, in der man richtig nachschlagen kann? css-tricks.com scheint nicht das Wahre zu sein...

 

[Myhar]

Ich habe mich bisher nach https://css-tricks.com/snippets/css/a-guide-to-flexbox/ als Nachschlagewerk gerichtet, aber da scheint viel falsch zu sein.

Das ist auch die von mir empfohlene und am meisten verwendete Nachschlageseite bezüglich flexbox. Finde ich persönlich am besten und dort ist eigentlich alles richtig.
Es wird dort nur nicht explizit darauf hingewiesen, dass du auch mehrere flexboxen auf einer Seite (bzw. bei untergeordneten Elementen) haben kannst.
Oder was ist dir dort falsch aufgefallen?

 

[Jormungand]

Unter Properties of the Children steht nichts davon, dass das Kindelement auch ein display:flex; braucht. Auch das justify-content: flex-end; wird auf der Seite dem Elternelement zugeordnet statt dem Kind.

Da ich mich streng an den Guide gehalten habe, bin ich nicht auf die Lösung gekommen.

 

[Myhar]

Das ist kein "guide" sondern ein was gibt es für properties und welche Auswirkungen haben diese. Da ist klar, es wird nicht erklärt, wie spezifische Probleme zu lösen sind.
Wie gesagt, es wird nicht explizit darauf hingewiesen, dass auch mehrere Elemente display: flex haben dürfen. Aber in einem guide zu zB font-weight wird auch nicht stehen, dass du die font-weight auf mehrere Elemente anwenden kannst. Das ist das Grundprinzip zu CSS, wenn dir das Wissen fehlt, dann musst du nach einem allgemeinen CSS-Guide suchen.

 

[Jormungand]

Ich kenne die Grundprinzipien von CSS. Aber wenn auf einer Seite explizit die Eigenschaften für die parents Elemente und die child Elemente separiert werden, dann ist das schon sehr missverständlich.

 

[Myhar]

du hast bei deinem Beispiel einen denkfehler (oder ich) Aber ich denke, wenn jemand sagt, flexbox war sofort für einen klar, dann schwindelt er etwas. Es ist nicht unbedingt einfach, aber css-tricks ist nun mal die beste Anlaufstelle dafür. Generell sind die Beiträge dort sehr informativ.

Nun aber zu deinem denkfehler: Die seiten auf der rechten Spalte (die Kindelemente) sind wirklich nur direkte Nachfahren des Elternelements. Um bei meinem Beispiel mit div und p zu bleiben:
Definiere ich das div als display:flex, dann ist das p das direkte Kindelement. Der Text, der in <p> steht ist ein Kindelement von p, aber nicht von div. Um den text separat auszurichten muss für den Text (das p) nochmal display: flex definiert werden. Damit ist das p einerseits ein Kindelement vom div (und kann die Werte der rechten Seite annehmen), andererseits ist es selber ein Elternelement vom Text (da es ja display: flex hat) und kann die Werte auf der linken Seite annehmen.

Ohne dass man das p-Element zu einem Flex-Element macht funktioniert das meines Wissens nach nicht. deshalb auch der Anfangs zweimal nachgefragt Code, baust du dann nämlich deinen richtigen Code ein kann es durchaus sein, dass das CSS dann nicht mehr den gewünschten Effekt hat. Einfach deshalb, weil flexbox immer nur Eltern und direkte Kindelemente, aber nicht den Text in Kindelementen, beeinflusst.

Nachdem du meine Frage nach dem Quellcode so gekonnt ignoriert hast bin ich davon ausgegangen, dass das alles bewusst und schon verständlich ist. Und habe dies deshalb auch nicht in meiner Antwort explizit erwähnt.

 

[Jormungand]

Ich habe nie behauptet, dass flexbox sei für mich sofort klar gewesen und lasse mich da nicht der Lüge bezichtigen. css-tricks mag die beste Anlaufstelle für flexbox sein, aber hier hat sich die Seite missverständlich ausgedrückt.

Ich habe die Anfrage zu dem Quellcode nicht geliefert, da bei genauem Durchlesen der Beschreibung die Sachlage hätte klar sein müssen, bin aber auch gerne bereit gewesen, mein Anliegen zum besseren Verständnis mit Bildchen zu erklären. Da das anscheinend doch nicht gereicht hat, habe ich den Quellcode nachgeliefert.

Vielen Dank nochmal für deine Hilfe, aber bitte pflaume mich nicht so von oben herab an.

Beste Grüße
Jormungand

 

[AliceG]

Ich habe diesen Forenbeitrag beobachtet, und dachte mir bei der Diskussion:
"Was ist eigentlich hier los?"
Leider beobachte ich in letzter Zeit, dass hier auf psd-tutorials.de viele Anfragen und Beiträge einen ähnlichen Verlauf annehmen.
Und zwar in den meisten Rubriken. Manchmal kommt mir das so vor wie in einem Laden zu sein, wo die Verkäuferin mich bedienen muss aber eigentlich überhaupt keine Lust dazu hat. Resultat: sie wird unhöflich, pampig, unfreundlich, oder behandelt mich von oben herab, wie @Jormungand zutreffend formuliert hat.

Um ehrlich zu sein: ich verstehe das nicht ganz. Auf der einen Seite unterhält man sich in einigen Beiträgen darüber, dass die User Anzahl zurück geht, auf der anderen Seite aber tun einige "alte Hasen" hier so als ob sie die meisten User vertreiben wollten.

Ich hoffe, diese Phase ist bald vorbei. Liegt vielleicht am Wetter.