nix: Frage zum Wiki-Artikel „Flex-Container“

Beitrag lesen

problematische Seite

Kurz mal was gebastelt. Lustig da drin dann auch noch: wenn man im p aus width ein min-widthmacht, passiert schon wieder was:

<html>
	<head>
		<style>
/*			ol { display: …; } anscheinend: egal. */
			.catalog { display: flex; flex-flow: row wrap; gap: 1em; }
			li { display: inline-flex; }
			p {
				display: inline-block;
				/*min-*/width: 27vi;
			}
		</style>
	</head>
	<body>
		<ol class="catalog">
			<li>
				<p>A</p>	<p>B</p>	<p>C</p>
				<div class="inner">
					<p>a</p>	<p>b</p>	<p>c</p>
					<p>d</p>	<p>e</p>	<p>f</p>
				</div>
				<p>D</p>	<p>E</p>
			</li>
			<li>
				<p>F</p>	<p>G</p>	<p>H</p>
			</li>
			<li>
				<p>I</p>
			</li>
			<li>
				<p>J</p>
			</li>
	</body>
</html>

Hier ist das Verhalten (schon wieder) etwas anders als beim „großen Versuch“, aber immerhin ähnlich. Irgendwie scheint sich der Browser nicht entscheiden zu können, wie die inline-flex umbrechen sollen – oder nicht. Und: ein paar Buchstaben fehlen ab und an da doch im Alphabet?

Aber: wenn man dem inline-flex ein flex-flow: inherit; mit auf den Weg gibt (an dem hier anscheinend alles oder fast alles hängt), fließt das innere flex doch ein wenig im äußeren.[1]

(Für mich störend/irritierend ist: wenn ein Flex als inline-flex doch wieder nur als Flex behandelt wird, seine eigene „Zellkultur“ aufbaut … das ginge doch auch ohne inline.)

Obendrein habe ich jetzt den „sehr dringlichen Verdacht“, etwas verstanden zu haben: inherit meint wohl immer „den ganzen Parameter-Satz“ und nicht einzelne Werte. Ich meine, man kann das z. B. unter padding schon auch anders verstehen. (Die Darstellungweise von logischen Blöcken, hier eine „entweder oder“ Aufstellung, ist ja auch überall anders …) Denn: flex-flow: x inherit (o. ä.) „funktioniert auch nicht“.


  1. BTW: flex-direction (auch als Tteil von flex-flow) ist hier ja eigentlich überflüssig, vielleicht sogar (eigentlich) ein Fehler, das Spielen mit flex-wrap aber eigentlich nicht. Das ist eher lustig. ↩︎