Probleme mit flexbox

[avm75]

Vorallem frage ich mich gerade wie der PI im Wohnmobil Internetzugang bekommt.

Das ist so kompliziert nicht. Entweder über einen UMTS-Stick oder einen UMTS Router. Aktuell ist der Plan, dass der PI selbst zum AccessPoint wird ;-)

Hier mal der CSS-Code:

@charset "utf-8";
/* CSS Document */

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

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


#anzeige {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	
	-webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal; 
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center; 

    width:100%;
}

.button-small {
	flex: 2 50%;
}

.img-small {
	width:130px;
	height:130px;
}

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

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:100%;
}

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

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:100%;
}

.button-big {
	flex: 2 100%;
}

.img-big {
	width:230px;
	height:230px;
}

img {
	max-width:100%;
	height:100%;
	margin:20px;
}

@media screen 
and (orientation:portrait)
{

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

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:100%;
	
}

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

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: column-reverse;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:50%;
}

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

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: column-reverse;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:50%;
}
}

Ziel ist halt, dass alles im Landscape auf das Handy passt, aber auch auf dem PC oder Tablet ordentlich skaliert ist. Im Portrait Modus am Handy sollen die Container 1 und 2 50% der Bildbreite einnehmen, die Buttons alle gleich groß sein und die (noch gar nicht im Quelltext vorhandene) Uhrzeit und das Datum "verschwinden". Ich kann nicht mal sagen, der wievielte Versuch das jetzt ist... :-(