Probleme mit flexbox

[Gunnar Bittersmann]

@@avm75

@charset "utf-8";

Wenn deine HTML-Ressourcen auch UTF-8-codiert sind, kann die Angabe weg.

body {
	background: #000;
	padding: 20px;
	font-family: 'Open Sans', sans-serif;
    color:#fff;	
}

#display {
	padding:20px;
	width:97%;
	background:#0f0f0f;
}

Wozu hat #display nochmal Padding, wo body schon Padding hat?

97%? Magic number? Was sind die fehlenden 3%? Die 20px? Manchmal vielleicht. Oder auch nicht.

Verwende 100% (da Default also gar keine Angabe) und das Box-Modell, wo das Padding in der Breite enthalten ist.

Aber wozu ist das <div id="display"> überhaupt da? Du hast bereits genügend Container. Weg damit!

#anzeige {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

Ich nehme an, das Zeugs ist nicht für die Weltöffentlichkeit, sondern einen eng überschaubaren Nutzerkreis? Von dem du die verwendeten Geräte/Browser kennst? Dann kannst du bestimmen, welche Vendor-Präfixe du noch brauchst. Vermutlich gar keine.

LLAP 🖖