marctrix: Flexbox im Safari

SELF-Forum

Flexbox im Safari

marctrix
– Informationen zu den Bewertungsregeln

Hej alle,

als erstes Ihr habt recht. Flexboxen sind cool!

Schnell geschrieben, mächtig und leicht zu erlernen. Eigentlich.

Aber mit jeder CSS-Technik ist es doch dasselbe. Sie wehrt sich dagegen gemeistert zu werden...

Ein vermeintlich einfaches Beispiel habe ich mir da zusammen gebastelt. Eine WP-Test-Instanz für Schulungszwecke, aktuelles Theme installiert und die Beiträge auf der Startseite mittels flexbox angeordnet.

Um mehr Beiträge in den sichtbaren Bereich zu bekommen, sollen ein, zwei, drei oder viele Beiträge nebeneinander stehen - so viele eben passen.

Hat auch gleich geklappt. Jedenfalls machen Firefox und Chrome genau das, was ich mir vorgestellt habe, nachdem ich mir die Syntax von flexbox hier im Wiki angesehen habe. Nur dass ich jetzt schon den ganzen Nachmittag versuche, dem Safari beizubringen, was ich will, nervt gewaltig.

Weder bei google, noch sonst wo bin ich fündig geworden. Auch alte Schreibweisen, -webkit-Vendorpräfix und was ich sonst alles probiert habe, bringt keinen Erfolg.

Interessanterweise verhalten sich der Safari unter iOS und unter Mac OS X gleich - alles in der aktuellsten Version und laut caniuse sollte es auch keine Problem geben.

Mein Flex-Kram ist kurz und bescheiden, sogar durch alte Schreibweisen aufgebläht noch übersichtlich:

#main {	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.home .post {
	flex: 1 0 0;
	min-width: 25em;
	max-width: 50em;
}

Aber an irgendetwas muss sich der Safari doch stören! - Daher meine Bitte an alle, die mit flexbox schon mehr Erfahrung haben, ob da noch was fehlt...

Online ist das ganze unter schulung.mhis.de

Übrigens: das CSS des Themes rauszuwerfen hat auch nicht geholfen. Da sollte also nichts drinnen sein, wodran sich der Safari stören könnte...

Herzlichen Dank im Voraus!

Marc

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Flexbox im Safari

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

    Hej alle,

    das folgende funktioniert nicht im Safari, vermutlich zu recht?

    #main {	
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.home .post {
	flex: 1 0 0;
	min-width: 25em;
	max-width: 50em;
}

    Das Problem: Safari stört sich nicht an der festgelegten Mindestbreite, die ich mittels min-with angegeben habe. Wenn ich die als Basis-Wert eintrage, verhält sich das Layout wie gewünscht beim zusammenschieben. Jetzt geh ich noch mal in mein stilles Kämmerlein und schaue, ob ich auch eine Größenbeschränkung bei maximal 50er hinbekomme, um zu lange Zeilen zu verhindern...

    Hier der funktionierende Code (sogar mit verschachtelten Flexboxen):

    main {
	display: flex;
	flex-wrap: wrap;
}
#content {
	flex: 2.5 0 25em;
	display: flex;
	flex-wrap: wrap;
}
#sidebar {
	flex: 1 0 25em;
}
#content article {
	flex: 1 0 25em;
}

    Marc

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Flexbox im Safari

      MrMurphy1
      – Informationen zu den Bewertungsregeln

      Hall

      Hier der funktionierende Code (sogar mit verschachtelten Flexboxen):

      Allzu viel kann da eigentlich nicht funktionieren.

      #content {
	flex: 2.5 0 25em;
	display: flex;
	flex-wrap: wrap;
}

      	flex: 2.5 0 25em;

      hat keine Auswirkungen, da der Elterncontainer div.site-inner kein "display: flex" hat.

      	display: flex;
	flex-wrap: wrap;

      hat keine Auswirkungen, da div.content-area keine flex-Anweisung hat und deshalb die gesame Seitenbreite einnimmt. Deshalb wirkt sich auch

      #sidebar {
	flex: 1 0 25em;
}

      auf der gleichen Ebene wie div.content-area nicht aus, sondern bleibt festgewachsen unter div.content-area.

      Also funktioniert nur

      main {
	display: flex;
	flex-wrap: wrap;
}

      im Zusammenhang mit

      #content article {
	flex: 1 0 25em;
}

      Insgesamt scheinst du dich zwischen den vielen Containern etwas verlaufen zu haben.

      Gruss

      MrMurphy

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. 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