Ankündigung

Einklappen
Keine Ankündigung bisher.

display: flex

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • display: flex

    Hallo,

    ich habe mich aktuell mal ein wenig in das Thema flex eingearbeitet und verstehe eines noch nicht so genau.
    Zu Testzwecken habe ich mal ein Flex-Layout erstellt:

    HTML-Code:
    <!DOCTYPE html>
    <html lang="de">
        <head>
            <style>
    
                * {
                    word-wrap:    break-word;
                }
                html, body {
                    margin:                0;
                    padding:            0;
                    font-size:            25px;
                }
                #test {
                    display:            flex;
                    flex-direction:        column;
                    background-color:    rgb(255, 0, 0);
                }
                #test div {
                    display:            flex;
                    flex-direction:        column;
                    background-color:    rgb(255, 255, 0);
                    border:                1px solid #e2e2e2;
                    margin-bottom:        10px;
                }
                #test div div {
                    display:            flex;
                    flex-direction:        row;
                    background-color:    rgb(255, 0, 255);
                    margin:                0px;
                }
                #test div div div {
                    background-color:    rgb(0, 255, 0);
                    width:                100%;
                }
    
            </style>
        </head>
        <body>
            <div id="test">
                <div>1.
                    <div>
                        <div style="width: 100px;">1.1.1</div>
                        <div style="min-width: 0;">1.1.2 text1 text1 text1 text1 text1 text1 text1 <span style="color: #ff0000;">text2 text2 text2</span> text3 text3 text3</div>
                        <div style="width: 50px;">1.1.3</div>
                    </div>
                    <div>1.2</div>
                    <div>1.3</div>
                </div>
                <div>2.
                    <div>2.1</div>
                    <div>2.2</div>
                    <div>2.3</div>
                </div>
                <div>3.</div>
            </div>
        </body>
    </html>
    Warum werden die Leerzeilen vor und nach dem roten Text (text2) entfernt? Ich nehme mal an, dass der rote Text als eigenständiges Item angesehen wird?

    Ich könnte dieses div jetzt als inline darstellen, hätte dann aber die Möglichkeiten von flex nicht mehr.
    Oder noch ein <span style="display: inline;"> um den Text?
    Oder ich nehme white-space: pre; ?

    Oder gibt es noch andere Möglichkeiten, den Text als normalen zusammengehörigen Text darzustellen?

    Hat jemand eine Idee?
    Man friert nur, wenn man glaubt, einem sei kalt


  • #2
    Weil bei dir jedes div ein flex Container ist.

    Kommentar


    • #3
      Darüber hinaus sollte man die häufig zitierte "Div-Suppe" tunlichst vermeiden, es gibt genügend semantische HTML-Elemente zur Textauszeichung.

      Wenn man Text direkt in Flexboxen schreibt, dann kann der Text ohne HTML-Auszeichnung ja schlecht ein Flex-Item / Flexbox-Child werden.

      Bei Bedarf gibt es auch analog zum "inline-block" in Flexbox "inline-flex".

      Kommentar

      Lädt...
      X