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:
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?
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>
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?
Kommentar