nicht angemeldet
hi matthias,
auf dem desktop mit ff 38.0.5 funktioniert das mit der neuanordnung der elemente auch, wenn man das fenster kleiner macht. aber wenn man es auf dem 10.1" tablet anguckt sieht es leider schei...nbar kaputt aus.
Schau mal nach der Browser-Unterstützung: http://caniuse.com/#feat=flexbox
Wsl. benötigst Du den Browser-Präfix -webkit- vor den CSS-Eigenschaften.
Schau Dir mal die Seiten im Wiki zu Flexbox an. Direkt drunter ist ein Link auf das Tutorial. Da sind die Browserpräfixe schon drin.
<!DOCTYPE HTML>
<html>
<head>
<title>Flexbox</title>
<meta charset="utf-8">
<!-- <link rel="stylesheet" href="style.css" type="text/css"> -->
<style type="text/css">
*
{
box-sizing: border-box;
font: 1em /1.5 Georgia;
}
html
{
padding: 0 5%;
}
body
{
margin: auto;
max-width: 42em;
}
@media (min-width: 30em)
{
body
{
display: flex;
flex-wrap: wrap;
}
header
{
order: 1;
width: 100%;
}
main
{
flex-grow: 2;
order: 3;
}
nav
{
flex-grow: 1;
max-width: 16em;
order: 2;
}
footer
{
order: 4;
width: 100%;
}
}
header, main, nav, footer
{
border: 1px solid hsl(10, 80%, 30%);
background: hsl(10, 80%, 60%);
margin: 1px;
padding: 0 0.5em;
}
</style>
</head>
<body>
<header>
<h1>heading</h1>
</header>
<main role="main">
<p>main content</p>
</main>
<nav>
<h2>navigation</h2>
<p>navigation content</p>
</nav>
<footer>
<p>footer content</p>
</footer>
</body>
</html>
leider weiß ich nicht, ob ich das so richtig zusammenkopiert habe und wo da die brosserpräfixe hingehehören. könntest du die bitte mal einfügen?
warum schreibt ihr eigentlich die beispiele immer außerhalb dieses forums in irgendwelche fremden bastelseiten? gehen die da nicht irgendwann verloren? mein bruder nennt das immer linkomanitis. der ist aber jurist. da macht der sich immer eine kopie von jeweiligen stand und meint ich soll das auch besser tun. ich glaube er hat recht.
lg juli
Matthias Scharwies
Gunnar Bittersmann
Matthias Apsel
Tabellenkalk