marctrix: Flexbox im Safari

Beitrag lesen

SELF-Forum

Flexbox im Safari

marctrix Homepage des Autors (Versionen)
– Informationen zu den Bewertungsregeln

Sorry MrMurphy1,

Hier der funktionierende Code (sogar mit verschachtelten Flexboxen):

Allzu viel kann da eigentlich nicht funktionieren.

Doch, allerdings stammen die Klassen von einer anderen Seite.

Habe das neue HTML vergessen, bzw wollte ursprünglich eigentlich die Klassen umbenennen, aber so (s.u.) ist es sauberer. Das funktionierende Beispiel:

<!doctype html>
<html class="no-js" lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title></title>
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			main {
				display: flex;
				flex-wrap: wrap;
			}
			#content {
				flex: 2.5 0 25em;
				display: flex;
				flex-wrap: wrap;
			}
			#content article {
				flex: 1 0 25em;
			}
			#sidebar {
				flex: 1 0 25em;
			}
		</style>
	</head>

  <body>
		<header>
			<h1>Eine Webseite mit flexbox-Layout</h1>
		</header>
		<main>
			<div id="content">
				<article>
					<h2>Artikelüberschrift</h2>
					<p>Lorem ipsum dolor sit ...</p>
				</article>
				<article>
					<h2>Artikelüberschrift</h2>
					<p>Lorem ipsum dolor sit ...</p>
				</article>
				<article>
					<h2>Artikelüberschrift</h2>
					<p>Lorem ipsum dolor sit ...</p>
				</article>
				<article>
					<h2>Artikelüberschrift</h2>
					<p>Lorem ipsum dolor sit ...</p>
				</article>
				<article>
					<h2>Artikelüberschrift</h2>
					<p>Lorem ipsum dolor sit ...</p>
				</article>
			</div>
			<aside id="sidebar">
				<h2>Weiterführende Informationen</h2>
				<article>
					<h3>Artikelüberschrift</h3>
					<p>Lorem ipsum dolor sit am...</p>
				</article>
			</aside>
		</main>
  </body>
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln