Flex-Box

[franzsen]

Bin gerade dabei flexbox zu üben. Leider tut sich überhaupt nichts. Auf "Webkrauts" wird das Kapitel erklärt und der Artikel ist zwar schon von 2012 aber inzwischen müßte Safari das können. Folgendes steht:

Grundlage für die flex-Darstellung

Die CSS-Eigenschaft display hat mit CSS3 zwei neue Parameter bekommen: flex und inline-flex. Eine dieser Eigenschaften muss dem umgebenden div zugewiesen werden, was die Flexbox-Darstellung »aktiviert«. Hier, wie in allen folgenden Beispielen, wird neben der Standardschreibweise die Eigenschaft mit dem Vendor-Präfix -webkit- eingesetzt, damit Google Chrome diese erkennt. Safari unterstützt die Eigenschaften jedoch nicht, auch wenn dies ein Webkit-Browser ist.

Der Code:

#beispiel-01 {
  display: -webkit-flex;
  display: flex;
}

<div id="beispiel-x">
  <nav>Navigation</nav>
  <section>Inhalt</section>
  <aside>Weiteres</aside>
</div>

Kann man dann mit Safari nicht mit flexbox arbeiten und welche Browser können dann meine Seite richtig darstellen?

Das ist die Seite:
http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts

LG Franz

[Auge]

Hallo

Bin gerade dabei flexbox zu üben. Leider tut sich überhaupt nichts. Auf "Webkrauts" wird das Kapitel erklärt und der Artikel ist zwar schon von 2012 aber inzwischen müßte Safari das können.

Laut CanIUse.com kann Safari das mit dem auch von dir verwendeten Präfix -webkit-.

#beispiel-01 {
}

<div id="beispiel-x"></div>

Einmal die ID „beispiel-01“ und einmal die ID „beispiel-x“? Ist das Absicht?

Tschö, Auge

[franzsen]

#beispiel-01 {
}

<div id="beispiel-x"></div>

Einmal die ID „beispiel-01“ und einmal die ID „beispiel-x“? Ist das Absicht?

Habe den Code übernommen wie angegeben. Inzwischen habe ich das "-x" gelöscht und nun scheint es zu funktionieren. Ich dachte es gehört in diesem Beispiel dazu. War wohl ein Mißverständnis.

[Auge]

Hallo

#beispiel-01 {
}

<div id="beispiel-x"></div>

Einmal die ID „beispiel-01“ und einmal die ID „beispiel-x“? Ist das Absicht?

Habe den Code übernommen wie angegeben. Inzwischen habe ich das "-x" gelöscht und nun scheint es zu funktionieren. Ich dachte es gehört in diesem Beispiel dazu. War wohl ein Mißverständnis.

Das „x“ ist ein Platzhalter für eine Zahl, die ihre Entsprechung in den CSS-Selektoren findet. Das steht im Webkrauts-Artikel auch direkt über dem Kasten mit dem HTML-Quelltext.

Tschö, Auge

[Gunnar Bittersmann]

@@franzsen

#beispiel-01 { … }

<div id="beispiel-x">

Kann man dann mit Safari nicht mit flexbox arbeiten

Doch, kann man.

und welche Browser können dann meine Seite richtig darstellen?

Alle relevanten.

„Richtig“ heißt bei deinem Quellcode, dass kein Browser flext. Richtig != gewollt.

Du musst schon genau das sagen, was du willst. Bspw. genau das Element selektieren, das du willst.

Das ist die Seite:
http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts

Quellen bitte verlinken. http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts

Und Beispiele bitte online.

LLAP 🖖

[Gunnar Bittersmann]

@@franzsen

Eine dieser Eigenschaften muss dem umgebenden div zugewiesen werden, was die Flexbox-Darstellung »aktiviert«.

Ein solches umgebendes div sollte bei dir aber gar nicht vorhanden sein, da du auch body { display: flex } setzen kannst.

LLAP 🖖

[franzsen]

Eine dieser Eigenschaften muss dem umgebenden div zugewiesen werden, was die Flexbox-Darstellung »aktiviert«.

Ein solches umgebendes div sollte bei dir aber gar nicht vorhanden sein, da du auch body { display: flex } setzen kannst.

Das Thema hatten wir schon. In diesem Fall geht es für mich um ein neues Thema. Was liegt daher näher als den Code so zu wählen wie angegeben um die Übungen nachvollziehen zu können. Dabei können erfahrungsgemäß Mißverständnisse und Fragen auftauchen, die für Profis selbstverständlich sind aber nicht für Neulinge. Dazu gehört natürlich auch die amateurhafte Fragestellung.

[Gunnar Bittersmann]

@@franzsen

Was liegt daher näher als den Code so zu wählen wie angegeben um die Übungen nachvollziehen zu können.

Das ist verständlich.

Es ist das Versäumnis der Artikel-Schreiberlinge, in Beispielcode unbedacht div-Elemente einzusetzen. Und das auch noch ohne darauf hinzuweisen, dass in wirklichen Anwendungen an der Stelle andere Elementtypen angebracht wären.

LLAP 🖖

[franzsen]

Auf der Webseite steht folgendes: Auch ohne diese explizit gesetzte Eigenschaft werden alle Flexbox-Elemente auf die gleiche Höhe gestreckt. Alleine die Höhenangabe reicht aus, auch wenn sie nur für ein Element in einer Reihe vergeben ist, damit alle Elemente die gleiche Höhe annehmen.

Ich finde aber kein Beispiel wie man jedem Element (nav, aside) eine eigene Höhe zuordnen kann? Würde die nächsten Beispiele (align-items: center, ...;) besser unterscheiden können.

[MrMurphy1]

Hallo

Ich finde aber kein Beispiel wie man jedem Element (nav, aside) eine eigene Höhe zuordnen kann?

Das hat dann ja nichts mehr mit Flexbox zu tun.

Würde die nächsten Beispiele (align-items: center, ...;) besser unterscheiden können.

Das kann ich nicht nachvollziehen.

Die Beispiele sind leider nicht sehr praxisgerecht, das solltest du dir vor Augen halten. In Webseiten sollte die Angaben von Höhen so weit wie möglich vermieden werden. Die Höhe bestimmt sich durch den Inhalt.

Die Beispiele sind eher Anfangsspielereien mit Flexbox.

Gruss

MrMurphy

[franzsen]

Hallo

Ich finde aber kein Beispiel wie man jedem Element (nav, aside) eine eigene Höhe zuordnen kann?

Das hat dann ja nichts mehr mit Flexbox zu tun.

Ist das so gewünscht, daß mit flexbox alle die gleiche Höhe haben? Die Breiten lassen sich wie gewünscht verändern.

Würde die nächsten Beispiele (align-items: center, ...;) besser unterscheiden können.

Das kann ich nicht nachvollziehen.

Nun, wenn man sich die Graphik ansieht versteht man „... center, bottom, etc.“ deswegen, weil die seitlichen Boxen unterschiedliche Höhen haben.

Die Beispiele sind leider nicht sehr praxisgerecht, das solltest du dir vor Augen halten. In Webseiten sollte die Angaben von Höhen so weit wie möglich vermieden werden. Die Höhe bestimmt sich durch den Inhalt.

Nun, das praktiziere ich ja bereits bei meiner Webseite. Bei Übungsbeispielen verwende ich sie schon um Wirkungsweisen besser zu erkennen.

Die Beispiele sind eher Anfangsspielereien mit Flexbox.

... aber auch als Anfangsspielereien nicht sehr hilf- und lehrreich. Einerseits wird gedrängt anstatt „float“ eher „flexbox“ zu verwenden, andererseits gibt es dazu keine verständlichen Anleitungen. Auch hier vermisse ich entsprechende Beispiele.

[Gunnar Bittersmann]

@@franzsen

Ist das so gewünscht, daß mit flexbox alle die gleiche Höhe haben?

Ich sagte doch schon, dass stretch der Defaultwert für die Eigenschaft align-items ist.

Das heißt, beim Defaultwert row für die Eigenschaft flex-direction haben die Flexitems die gleiche Höhe.

Beim Wert column hätten alle die gleiche Breite.

andererseits gibt es dazu keine verständlichen Anleitungen. Auch hier vermisse ich entsprechende Beispiele.

Was genzu verstehst du am Complete Guide to Flexbox nicht?

Und dass es da keine Beispiele gäbe, stimmt auch nicht.

LLAP 🖖

[franzsen]

@@franzsen

Ist das so gewünscht, daß mit flexbox alle die gleiche Höhe haben?

Ich sagte doch schon, dass stretch der Defaultwert für die Eigenschaft align-items ist.

Das heißt, beim Defaultwert row für die Eigenschaft flex-direction haben die Flexitems die gleiche Höhe.

Beim Wert column hätten alle die gleiche Breite.

Und wie stelle ich unterschiedliche Höhen ein? Für flex-direction gibt es nur die Möglichkeit der Ausrichtung:

stretch: (Standardwert) Alle Elemente werden gleichmäßig verteilt, ein möglicher Abstand zwischen den Elementen und nach dem letzten Element ist gleich
flex-start: Alle Elemente werden oben angeordnet
flex-end: Alle Elemente werden unten angeordnet
center: Alle Elemente werden mittig angeordnet, ein möglicher Abstand ist oben und unten
baseline: Alle Elemente werden an der Grundlinie des Eltern-Containers ausgerichtet
initial
inherit

andererseits gibt es dazu keine verständlichen Anleitungen. Auch hier vermisse ich entsprechende Beispiele.

Was genzu verstehst du am Complete Guide to Flexbox nicht?

Und dass es da keine Beispiele gäbe, stimmt auch nicht.

Das ist noch zu verwirrend. Wahrscheinlich weil ich es gewohnt bin mit CSS3 einzeln zu gestalten.

[MrMurphy1]

Hallo

Und wie stelle ich unterschiedliche Höhen ein?

Mit CSS height.

Gruss

MrMurphy

[franzsen]

Hallo

Und wie stelle ich unterschiedliche Höhen ein?

Mit CSS height.

Aha! Dann funktioniert „min-height“ hier nicht? Habe mich dann von einer Eingabe in einem Beispiel verleiten lassen. Kann man das so steuern, daß jedes Element sich autonom dem Inhalt anpaßt?
„min-height“ funktioniert anscheinend auf alle Elemente während „height“ auf einzelne Elemente wirkt. Außerdem scheint es einen Unterschied zu geben ob ich die Höhe in „px“ oder „%“ angebe.

[Der Martin]

Hi,

Und wie stelle ich unterschiedliche Höhen ein?

Mit CSS height.

Aha! Dann funktioniert „min-height“ hier nicht?

doch, bestimmt.

„min-height“ funktioniert anscheinend auf alle Elemente während „height“ auf einzelne Elemente wirkt.

Das klingt konfus. Sowohl height als auch min-height wirken immer auf das Element, auf das sie angewendet werden. Ich höre da bei dir ein generelles Verständnis-Defizit in CSS heraus.

Außerdem scheint es einen Unterschied zu geben ob ich die Höhe in „px“ oder „%“ angebe.

Natürlich. Eine Angabe in Prozent bezieht sich immer auf die Höhe des Elternelements; eine Angabe in Pixel ist unabhängig von benachbarten oder übergeordneten Elementen.

So long,
 Martin

[Gunnar Bittersmann]

@@MrMurphy1

Und wie stelle ich unterschiedliche Höhen ein?

Mit CSS height.

Nein.

Damit kann man die Höhe aller Flexitems verändern; nicht aber erreichen, dass sie unterschiedliche Höhen haben.

LLAP 🖖

[franzsen]

@@MrMurphy1

Und wie stelle ich unterschiedliche Höhen ein?

Mit CSS height.

Nein.

Damit kann man die Höhe aller Flexitems verändern; nicht aber erreichen, dass sie unterschiedliche Höhen haben.

<!doctype html>
<html lang="de">

<head>
	<meta charset="utf-8" />
	<title></title>

<style>
nav {
	background-color: red;
	border: 2px solid;
	border-radius: 1em;
	}
section {
	background-color: aqua;
	border: 2px solid;
	border-radius: 1em;
	}
aside {
	background-color: yellow;
	border: 2px solid;
	border-radius: 1em;
	}

#beispiel {
	display: -webkit-flex;
	display: flex;
	align-items: center;
	}

#beispiel nav, aside {
	-webkit-flex-basis: 20%;
	flex-basis: 20%;
	}
nav {
	height: 80px;
	}
aside {
	height: 50px;
	}
#beispiel section {
	-webkit-flex-basis: 60%;
	flex-basis: 60%;
	height: 150px;
	}
section {
	min-height: 100px; /* < kein Einfluß wenn Inhalt größer*/
}
</style>
</head>

<body>

<div id="beispiel">
	<nav>
		<ul>
			<li>Zeile 1</li>
			<li>Zeile 2</li>
			<li>Zeile 3</li>
		</ul>
	</nav>
	<section>
		<p>Inhalt</p>
		<p>Inhalt</p>
		<p>Inhalt</p>
		<p>Inhalt</p>
	</section>
	<aside>
		Aside
	</aside>
</div>

</body>
</html>

Eins ist aber eigentümlich, wenn ich bei nav „min-height“ > section setze, verändert es nur nav, setze ich es < bleibt es mit section gleich groß, schreibe ich jedoch „height“ und setze es kleiner, hat es auf die Höhe sehr wohl eine Auswirkung.
Anders in Prozentangabe. Mit „min-height“ setzt es die Höhe gleich mit der Höhe von „#beispiel section“ ganz gleich wie hoch die Prozentangabe ist. Mit „height“ bleibt es auf der Höhe seines Inhalts, ganz gleich welche Prozentangabe ich mache.
Bei „#beispiel section“ funktioniert „min-height“ allerdings nicht < als die Größe von nav.

Ganz schön verwirrend? Ist da die andere Methode nicht besser da ich jedes Element einzeln ansprechen kann?

[MrMurphy1]

Hallo,

willst du es nicht verstehen oder kannst du es nicht verstehen: Lass bei Verwendung von Flexbox die Finger von height oder min-height. Ausnahme (Hallo: AUSNAHME): Du willst einen bestimmten Effekt errreichen und du weißt genau was du tust.

Ganz schön verwirrend?

Nein, alles logisch und nachvollziehbar. Wenn du mehreren Elementen height- bzw. min-height-Angaben zuweist musst du natürlich auch die Auswirkungen auf alle Elemente berücksichtigen.

Ist da die andere Methode nicht besser da ich jedes Element einzeln ansprechen kann?

Wie war es doch gleich: Laß bei Verwendung ...

Wenn du die Auswirkungen von height-Angaben testen willst gehe strukturiert vor. Mit deinem wirren Durcheinander lernst du nichts und wirst auch zukünftig unsinnige oder gar störende height-Angaben verwenden.

Gruss

MrMurphy

[franzsen]

Hallo,

willst du es nicht verstehen oder kannst du es nicht verstehen: Lass bei Verwendung von Flexbox die Finger von height oder min-height. Ausnahme (Hallo: AUSNAHME): Du willst einen bestimmten Effekt errreichen und du weißt genau was du tust.

Nun, wie soll ich etwas verstehen lernen wenn ich nicht durch Versuche (Aktion-Reaktion) die Wirkungen prüfen kann? Manche Dinge erklären sich durch Wechselwirkungen von selbst, andere wiederum nicht und dazu ist meiner Meinung nach das Forum ja da. Für Euch mag das (auch erst nach anfänglichen Fehlversuchen) selbstverständlich sein aber nicht für Anfänger. Beim Üben ist der bestimmte Effekt etwas auszutesten. In meinem Fall wollte ich feststellen, ob man die einzelnen Elemente auf eine bestimmte Höhe einstellen kann. Beispielsweise braucht "aside" mit kleiner Anmerkung nicht die gleiche Höhe haben wie der Inhalt selber.
Übrigens ist im ersten Beispiel die Verwendung von "height" gegeben.

Ganz schön verwirrend?

Nein, alles logisch und nachvollziehbar. Wenn du mehreren Elementen height- bzw. min-height-Angaben zuweist musst du natürlich auch die Auswirkungen auf alle Elemente berücksichtigen.

Und wie komme ich auf die Auswirkungen drauf wenn ich nichts probiere? Welche Auswirkungen sind das die ich berücksichtigen muß?

Wenn du die Auswirkungen von height-Angaben testen willst gehe strukturiert vor. Mit deinem wirren Durcheinander lernst du nichts und wirst auch zukünftig unsinnige oder gar störende height-Angaben verwenden.

Ich meinte das mache ich ja? Ich baue ein Grundgerüst mit nav, header, etc. und versuche das nun mit flexbox zu gestalten.

[MrMurphy1]

Hallo

Wenn du die Auswirkungen von height-Angaben testen willst gehe strukturiert vor.

Ich meinte das mache ich ja?

Nein, das machst du nicht mal ansatzweise. Ansonsten würde dein Quelltext strukturiert sein und anderen Inhalt enthalten.

Du spielst nur ohne nachvollziehbare Linie herum, kannst deshalb daraus nichts lernen und kommst nicht weiter.

So ein paar Übungen und freie Tests mit height-Angaben dauern doch nicht länger als 30 Minuten - wie lange doktorst du daran schon herum? Und das mit einem Thema, das in der Praxis mehr oder weniger bedeutungslos ist?

Die richtigen Probleme hast du offensichtlich noch gar nicht erkannt. Es sollte mich jedenfalls wundern wenn dazu keine Fragen kommen. In die musst du Zeit und Nerven investieren um Flexbox zu beherrschen - und nicht umgekehrt.

Gruss

MrMurphy

[franzsen]

Ich meinte das mache ich ja?

Nein, das machst du nicht mal ansatzweise. Ansonsten würde dein Quelltext strukturiert sein und anderen Inhalt enthalten.

Dann mußt Du mir einmal erklären was Du unter strukturiert verstehst. Für mich heißt das "systematisch, planmäßig, geordnet". Was fehlt noch außer einen HTML-Code mit header, Inhalt und footer zu erstellen, in allen etwas Text zur Erkennung der Wirkung und um einen Quelltext zu haben den man mit CSS bearbeiten kann, es soll ja kein Roman darinnen stehen. Elemente die eben bei der Erstellung einer Webseite vorkommen bzw. zum speziellen Thema benötigt werden und etwas Farbe und Rand.

Du spielst nur ohne nachvollziehbare Linie herum, kannst deshalb daraus nichts lernen und kommst nicht weiter.

?

So ein paar Übungen und freie Tests mit height-Angaben dauern doch nicht länger als 30 Minuten - wie lange doktorst du daran schon herum? Und das mit einem Thema, das in der Praxis mehr oder weniger bedeutungslos ist?

Hast Du dann ein paar Beispiele bzw. eine Idee wie ich es richtig anpacken soll? Theorie hilft mir dann nichts. Ich dachte das Thema wäre wichtig um von float und clear weg zu kommen; die Zukunft heißt flexbox? Wenn es in der Praxis bedeutungslos ist ist es verlorene Zeit die man anders besser einsetzt?

Die richtigen Probleme hast du offensichtlich noch gar nicht erkannt. Es sollte mich jedenfalls wundern wenn dazu keine Fragen kommen. In die musst du Zeit und Nerven investieren um Flexbox zu beherrschen - und nicht umgekehrt.

Kannst Du das auch konkretisieren. Du solltest sie beim Namen nennen, oder soll ich raten welche das sein könnten?

[MrMurphy1]

Hallo

Für mich heißt das "systematisch, planmäßig, geordnet".

Genau. Und das machst du offensichtlich nicht.

Zunächst benötigst du einen bestimmen minimalen HTML-Grundquelltext, von dem DU genau weißt wie er sich auswirkt. Den musst DU beherrschen.

Darin musst DU fremden Quellcode so einfügen können, dass die Webseite funktioniert.

Ein fremder minimaler HTML-Grundquelltext, dessen Auswirkungen du nicht in- und auswendig im Schlaf kennst, nützt dir überhaupt nichts.

Da ich in der Regel täglich mehrere Test- und Übungsdateien erstelle oder aus vorgegebenen Quelltexten Dateien mit meinem Grundgerüst erstelle benutze ich interne CSS-Angaben. Sonst müsste ich noch zusätzlich hunderte externe CSS-Dateien verwalten.

Die CSS-Angaben sollten so aufgesplittet sein, das du deine Angaben ohne Probleme erkennen und ändern kannst. Dann können für die Höhenangaben zum Beispiel sein:

• Grundeinstellungen
• Grundeinstellungen für diese Seite
• Spezielle Einstellungen (Abstände, Rahmen)
• Farben
• Flexbox Grundlayout
• Höhenangaben

Je nach Bedarf füge ich dann weitere Abteilungen hinzu oder lasse welche weg. Das kommt immer auf den konkreten Einzelfall an.

In der Praxis splitte ich die CSS-Angaben nicht so extrem aus, beim Testen hat sich das aber bewährt.

In deinen CSS-Angaben sind die jeweiligen Höhenangaben so verteilt dass sie kaum zusammenhängend beurteilt werden können. Zudem verwendest du für die selben Elemente verschiedene Bezeichnungen, was deine CSS-Angaben zusätzlich unübersichtlicher macht, obwohl es relativ wenige CSS-Angaben gibt. Strukturiert geht anders.

Die Abmessungen der entscheidenen Elemente sollten sichtbar gemacht werden, am besten durch Rahmen. Die lenken nicht so sehr ab wie Farben und die Farben stehen für andere Lösungshilfen zur Verfügung.

Die Elemente sollten sichtbar und sinnvoll benannt werden, um sie direkt im Quelltext ohne großes Umdenken erkennen zu können. Das ist bei dir nicht möglich.

Ich gehe zum Beispiel davon aus, dass du weder weißt wie groß (hoch) das body-Element ist noch wie groß (hoch) das von dir überflüssigerweise eingefügte umschließende div-Element ist und wie sich das auf die Flexbox-Darstellung auswirkt. Zum Beispiel auch die unterschiedliche Darstellung in einigen Browsern.

Du solltest eine Ausgangsdatei mit nur wenigen Grundeinstellungen als Grundlage haben und davon eine oder mehrere Kopien erstellen, mit denen du dann die Tests durchführst. Wenn du die dann gleichzeitig im Browser öffnest kannst du die Auswirkungen deiner Änderungen besser erkennen, indem du zwischen den Tabs hin- und herschaltest.

Teste die Dateien in den relevanten Browsern wie Firefox, IE, Chrome, Opera und nach Möglichkeit Safari. Verändere dazu auch die Fenstergrößen. Teste die Dateien zusätzlich in Smartphones und / oder Tablets oder zumindest in deren Emulatoren. Grade bei Flexbox zeigen die unterschiedlichen Browser die Seiten teilweise noch sehr unterschiedlich an.

WYSIWYG-Editoren sind in dieser Hinsicht eine Pest. Die bringen entweder ihre eigenen Browser mit, die mit der Realität wenig zu tun haben oder verführen dazu, die Seite nur in einem Browser anzuzeigen, mit dem sie direkt verknüpft sind.

So weit nur mal ein paar Grundlagen zum strukturierten Testen.

Was fehlt noch außer einen HTML-Code mit header, Inhalt und footer zu erstellen

header und footer benötigst du nur wenn du die auch testen willst.

Theorie hilft mir dann nichts.

Ich denke nicht das dir meine Minimal-Datei weiterhilft, da du sie nicht verstehen wirst.

die Zukunft heißt flexbox? Wenn es in der Praxis bedeutungslos ist ist es verlorene Zeit die man anders besser einsetzt?

Flexbox testen - ja. Das ist bereits Gegenwart und auch die Zukunft. Ich meine die Zeitverschwendung mit den Höhenangaben. Ein Vorteil von Flexbox ist doch grade das Höhen- und auch Breitenangaben so weit wie möglich vermieden werden und die Browser die selbst berechnen.

Ich dachte das Thema wäre wichtig um von float und clear weg zu kommen

Float und Clear werden durch Flexbox nicht ersetzt, sondern haben auch zukünftig ihre Berechtigung und sollten auch angewandt werden, wenn es sinnvoll ist. Im Zuge der berechtigten Verdammnis von Tabellen zum Layouten (besser: zum Erstellen eines Grundlayouts) haben viele Webseitenersteller aus den Augen verloren, dass das Floaten auch nur ein Hilfskonstrukt war, für das es bis zur Einführung von Flexbox nichts besseres gab. Deutlich sinnvoller als Tabellen, aber nicht wie Flexbox direkt zum Erstellen eines Grundlayouts entwickelt.

Kannst Du das auch konkretisieren.

Ähm - das würde ein kleines Buch füllen, sonst hätte ich das bereits getan. Im Rahmen eines Forums ist das nicht möglich. Wenn du auf Probleme stößt helfe ich dir gerne weiter soweit ich Lösungen kenne.

Ich kann dir in einem weiteren Beitrag aber meine Linksammlung zu Flexbox-Seiten und -Videos zur Verfügung stellen. Falls dein Englisch nicht so gut ist solltest du dich davon bei den englischsprachigen Seiten nicht abschrecken lassen. Stöber die durch, häufig enthalten die Demos und den dazugehörigen Quelltext. Den solltest du dann auch ohne fundierte Englischkenntnisse übernehmen können. Gleiches gilt für die englischsprachigen Videos. Da ich keine Lust habe die Links in das Forumformat umzuwandeln werde ich die als komplette HTML-Quelldatei zur Verfügung stellen. Damit hast du dann auch meine Minimaldatei, falls die dich interessiert.

Ich würde die Höhenangaben mit Flexbox zudem zweimal testen: Einmal mit Containern mit Minimalinhalt und einmal mit Testinhalt. Auch dazu stelle ich dir jeweils einen Quelltext zur Verfügung.

Gruss

MrMurphy

[MrMurphy1]

Hallo,

hier meine Linksammlung zu Flexbox als Quelltext für eine HTML-Seite:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Flexbox Links 01</title>
   <meta name="description" content="HTML5, CSS3, Flexbox">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         margin: 0;
      }
   }

   /*Grundeinstellungen für diese Seite*/
   @media all {
      body {
         line-height: 1.5;
         padding: 1rem;
      }
      body > * {
         padding: 1rem;
         border: 1px solid silver;
         border-radius: 0.3rem;
         margin: 1rem;
      }
      a {
         color: blue;
         background-color: white;
         display: block;
         text-decoration: none;
         outline: none;
         margin-bottom: 0.5rem;
      }
      a:hover {
         color: blue;
         background-color: papayawhip;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
   }

   /*Flexbox Grundlayout*/
   @media all {
      body {
         display: flex;
         flex-wrap: wrap;
      }
      body > * {
         flex: 1 1 40%;
      }
   }
   @media only screen and (max-width: 900px) {
      body > * {
         flex: 1 1 100%;
      }
   }

   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <section>
      <h2>Flexbox</h2>
      <a href="http://on-design.de/tutor/html5_css3/css3/flexbox.html">On-Design Flexbox direkt</a>
      <a href="http://joerghuelsermann.de/artikel/css/flex/">Jörg Hülsermann</a>
      <a href="http://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/">Kulturbanause</a>
      <a href="http://bemeo.de/css-das-flexbox-modul/">bemeo</a>
      <a href="http://webkrauts.de/artikel/2012/css3-flexbox-abloesung-fuer-float-layouts">Flexbox Webkrauts</a>
      <a href="http://www.css-wiki.com/listings/flexbox.html">CSS-Wiki</a>
      <a href="http://de.learnlayout.com/flexbox.html">Lernlayout - Flexbox</a>
      <a href="http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox">SelfHTML Flexbox</a>
      <a href="http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout">SelfHTML - Anleitung Flexbox-Layout</a>
      <a href="https://msdn.microsoft.com/library/bg124109%28v=vs.85%29.aspx">Flexbox Microsoft</a>
      <a href="http://msdn.microsoft.com/de-de/library/ie/hh673531%28v=vs.85%29.aspx">Microsoft IE 10</a>
   </section>
   <section>
      <h2>Flexbox (Prefix- und Code-Generatoren)</h2>
      <a href="http://jsbin.com/gufoko/quiet">Auto-Prefixer (engl., Prefixe automatisch)</a>
      <a href="http://the-echoplex.net/flexyboxes/">Flexy Boxes (engl., Code-Generator)</a>
      <a href="https://scotch.io/demos/visual-guide-to-css3-flexbox-flexbox-playground">Flexbox Playground (engl., Codegenerator)</a>
      <a href="http://bennettfeely.com/flexplorer/">Flexplorer (engl., Code-Generator)</a>
      <a href="http://demo.agektmr.com/flexbox/">Flexbox please (engl., Code-Generator)</a>
   </section>
   <section>
      <h2>Flexbox englische Infos</h2>
      <a href="http://www.w3.org/TR/css-flexbox-1/">W3C (engl.)</a>
      <a href="https://github.com/philipwalton/flexbugs">Philip Walton - Flexbugs (engl.)</a>
      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Mozilla (engl.)</a>
      <a href="http://dev.opera.com/articles/advanced-cross-browser-flexbox/#fallbacks">Cross-Browser Flexbox (engl.)</a>
      <a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS-Tricks - Complete Guide (engl.)</a>
      <a href="https://css-tricks.com/flexbox-bar-navigation/">CSS-Tricks - Navigation (engl.)</a>
      <a href="http://philipwalton.github.io/solved-by-flexbox/">Philip Walton - Flexbox Showcase (engl.)</a>
      <a href="https://css-tricks.com/flexbox-bar-navigation/">Philip Walton - 6 Layoutbeispiele Navigation (engl.)</a>
      <a href="http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/">Flexbox in the real World (engl.)</a>
      <a href="http://www.sitepoint.com/flexbox-css-flexible-box-layout/">Sitepoint (engl.)</a>
   </section>
   <section>
      <h2>Flexbox Videos</h2>
      <a href="https://www.youtube.com/watch?v=mU0UBRq-IJc&index=3&list=PLa9XvrFEe8CmvU5Ant9fTx2lZudktAyhH">Florence Maurice - Flexbox Formular-Layout</a>
      <a href="https://www.video2brain.com/de/tutorial/leerraumverteilung">Florence Maurice - Flexbox Leerraumverteilung (Gratisvideo)</a>
      <a href="https://www.youtube.com/watch?v=xyLa8LNIKjg">Michael Albers</a>
      <a href="https://www.youtube.com/watch?v=yTkV2_eJox0">t3n - Flexbox im Praxiseinsatz</a>
      <a href="https://www.youtube.com/watch?v=hlgsOIPvfdM">Webinale 2014 - Flexbox-Modell</a>
      <a href="https://www.youtube.com/watch?v=FKfNbqqeGi4">Vortrag Tab Atkins (engl.)</a>
      <a href="https://www.youtube.com/watch?v=055T0xZpfRk">Vortrag Guillaume Hammadi (engl.)</a>
      <a href="https://www.youtube.com/watch?v=RSriXZSt0-c">Webdesigner Depot 01 (engl.)</a>
      <a href="https://www.youtube.com/watch?v=D-cWTumhSEU">Webdesigner Depot 02 (engl.)</a>
      <a href="https://www.youtube.com/watch?v=nB-Ygtk3AO0">Curtis Stage (engl.)</a>
      <a href="https://www.youtube.com/watch?v=G7EIAgfkhmg">devtips - Flexbox (engl.)</a>
      <a href="https://www.youtube.com/watch?v=H1lREysgdgc">devtips - Flexbox Examples (engl.)</a>
      <a href="https://www.youtube.com/watch?v=sewV3LsmoXI">Wes Box - Learn CSS3 Flexbox</a>
      <a href="https://www.youtube.com/results?search_query=lynda.com+flexbox">lynda.com (engl.)</a>
      <a href="https://www.youtube.com/watch?v=ZPrUPhaSMRI">Treehouse (engl., ab Min. 9)</a>
      <a href="https://www.youtube.com/watch?v=Vj7NZ6FiQvo&list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid">What the Flexbox (engl., 20 Videos)</a>
   </section>
</body>
</html>

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Ich mach das mal lesbar:

##Flexbox##

• On-Design Flexbox direkt
• Jörg Hülsermann
• Kulturbanause
• bemeo
• Flexbox Webkrauts
• CSS-Wiki
• Lernlayout - Flexbox
• SelfHTML Flexbox
• SelfHTML - Anleitung Flexbox-Layout
• Flexbox Microsoft
• Microsoft IE 10

##Flexbox (Prefix- und Code-Generatoren)##

• Auto-Prefixer (engl., Prefixe automatisch)
• Flexy Boxes (engl., Code-Generator)
• Flexbox Playground (engl., Codegenerator)
• Flexplorer (engl., Code-Generator)
• Flexbox please (engl., Code-Generator)

##Flexbox englische Infos##

• W3C (engl.)
• Philip Walton - Flexbugs (engl.)
• Mozilla (engl.)
• Cross-Browser Flexbox (engl.)
• CSS-Tricks - Complete Guide (engl.)
• CSS-Tricks - Navigation (engl.)
• Philip Walton - Flexbox Showcase (engl.)
• Philip Walton - 6 Layoutbeispiele Navigation (engl.)
• Flexbox in the real World (engl.)
• Sitepoint (engl.)

##Flexbox Videos##

• Florence Maurice - Flexbox Formular-Layout
• Florence Maurice - Flexbox Leerraumverteilung (Gratisvideo)
• Michael Albers
• t3n - Flexbox im Praxiseinsatz
• Webinale 2014 - Flexbox-Modell
• Vortrag Tab Atkins (engl.)
• Vortrag Guillaume Hammadi (engl.)
• Webdesigner Depot 01 (engl.)
• Webdesigner Depot 02 (engl.)
• Curtis Stage (engl.)
• devtips - Flexbox (engl.)
• devtips - Flexbox Examples (engl.)
• Wes Box - Learn CSS3 Flexbox
• lynda.com (engl.)
• Treehouse (engl., ab Min. 9)
• What the Flexbox (engl., 20 Videos)

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

##Flexbox Videos##

Sicher auch sehenswert: SmartWeb 2014 - Zoe Gillenwater - Leveling Up With Flexbox (schon allein wegen Bruce Lawson ;-))

Ich hab ihren diesjährigen Talk Enhancing Responsiveness With Flexbox auf der From the Front gesehen und mich zu dieser Äußerung hinreißen lassen. Mal sehen, wer das Video zuerst rausbringt: From the Front oder CSSConf EU.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich hab ihren diesjährigen Talk Enhancing Responsiveness With Flexbox auf der From the Front gesehen und mich zu dieser Äußerung hinreißen lassen. Mal sehen, wer das Video zuerst rausbringt: From the Front oder CSSConf EU.

And the winner is: CSSconf EU.

LLAP 🖖

[MrMurphy1]

Hallo,

hier der Quelltext für die Testdatei ohne Inhalt. Das body-Element hat zur Kennzeichnung einen deutlichen roten Rahmen und Fensterhöhe. Die einzelnen div haben noch keine Höhenangaben.

Du kannst so zum Beispiel mal die Höhe des body entfernen (auskommentieren) und schauen was passiert.

Die Zahlen im body-Bereich und CSS-Quelltext ( nth-child() ) stimmen überein, so dass eine direkte Zuordnung immer problemlos möglich ist. Die Farbbezeichnungen befinden sich ebenso im body-Bereich und ihm CSS-Quelltext.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         margin: 0;
      }
   }

   /*Grundeinstellungen für diese Seite*/
   @media all {
   }

   /*Spezielle Einstellungen*/
   @media all {
      body {
         border: 3px solid;
      }
      body > * {
         padding: 0.5rem;
         border: 1px solid;
         border-radius: 0.5rem;
         margin: 0.5rem;
      }
      h2 {
         padding: 0.5rem;
         margin: 0;
      }
   }

   /*Farben*/
   @media all {
      html {
      }
      body {
         border-color: red;
      }
      body > * {
         border-color: silver;
      }
      body > :nth-child(1) {
         background-color: blue;
      }
      body > :nth-child(2) {
         background-color: yellow;

      }
      body > :nth-child(3) {
         background-color: orange;
      }
      body > :nth-child(4) {
         background-color: green;
      }
      body > :nth-child(5) {
         background-color: gray;
      }
      body > :nth-child(6) {
         background-color: gold;
      }
   }

   /*Flexbox Grundlayout*/
   @media all {
      body {
         display: flex;
      }
      body > * {
      }
      body > :nth-child(1) {
      }
      body > :nth-child(2) {
      }
      body > :nth-child(3) {
      }
      body > :nth-child(4) {
      }
      body > :nth-child(5) {
      }
      body > :nth-child(6) {
      }
   }

   /*Spezielle Höhenangaben*/
   @media all {
      body {
         min-height: 100vh;
      }
      body > * {
      }
      body > :nth-child(1) {
      }
      body > :nth-child(2) {
      }
      body > :nth-child(3) {
      }
      body > :nth-child(4) {
      }
      body > :nth-child(5) {
      }
      body > :nth-child(6) {
      }
   }

   </style>
</head>
<body>
   <div>
      <h2>1 blue</h2>
   </div>
   <div>
      <h2>2 yellow</h2>
   </div>
   <div>
      <h2>3 orange</h2>
   </div>
   <div>
      <h2>4 green</h2>
   </div>
   <div>
      <h2>5 gray</h2>
   </div>
   <div>
      <h2>6 gold</h2>
   </div>
</body>
</html>

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

<html lang="de">

Das passt nicht zu deinem englischen Inhalt. Wenn du das in eine Beispieldatei schreibt, solltest du dazusagen, dass das ggfs. angepasst muss. Und das auch selbst tun.

   <meta name="description" content="HTML5, CSS3">

Ähm…

   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->

Nein.

   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);

Gewiss nicht.

   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }

Unnütz.

      html {
         font-size: 120%;
      }

Wirklich?

      body > * {
      }
      body > :nth-child(1) {
      }
      body > :nth-child(2) {
      }
      body > :nth-child(3) {
      }
      body > :nth-child(4) {
      }
      body > :nth-child(5) {
      }
      body > :nth-child(6) {
      }

Hier solltest du dazusagen, dass diese Selektoren zum Testen geeignet sind, aber nicht für die produktive Seite.

LLAP 🖖

[MrMurphy1]

Hallo,

und hier noch mal eine Testdatei, bei der die Höhe der Container durch ihren Inhalt bestimmt wird.

Wenn du dir die Datei so wie sie ist in verschiedenen Browsern anschaust sollte dir bei einem der "Standardbrowser" eine unterschiedliche Darstellung auffallen.

<!doctype html>
<html lang="de">
<head>
   <meta charset="utf-8" />
   <title>01</title>
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>

   /*Grundeinstellungen*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      body {
         margin: 0;
      }
   }

   /*Grundeinstellungen für diese Seite*/
   @media all {
      a {
         color: black;
         text-decoration: none;
         outline: none;
         display: block;
      }
      a:visited {
         color: black;
      }
   }

   /*Spezielle Einstellungen*/
   @media all {
      body {
         border: 5px solid;
      }
      body > * {
         padding: 0.5rem;
         border: 2px solid;
         border-radius: 0.5rem;
         margin: 0.5rem;
      }
      nav {
      }
      section {
      }
      aside {
      }
   }

   /*Farben*/
   @media all {
      html {
      }
      body {
         border-color: orange;
      }
      body > * {
         border-color: silver;
      }
      nav {
         /*background-color: red;*/
      }
      section {
         /*background-color: aqua;*/
      }
      aside {
         /*background-color: yellow;*/
      }
   }

   /*Flexbox Grundlayout*/
   @media all {
      body {
         display: flex;
         align-items: stretch;
         align-items: flex-start;
         align-items: baseline;
         align-items: center;
      }
      nav {
         flex-basis: 20%;
      }
      section {
         flex-basis: 60%;
      }
      aside {
         flex-basis: 20%;
      }
   }

   /*Spezielle Höhenangaben*/
   @media all {
      body {
         min-height: 100vh;
      }
      nav {
         /*height: 80px;*/
      }
      aside {
         /*height: 50px;*/
      }
      section {
         /*height: 150px;*/
      }
      section {
         /*min-height: 100px;*/
      }
   }

   /* Vorlage zum Kopieren für Media Queries */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <nav>
      <h2>nav</h2>
      <a href="#">Bugatti</a>
      <a href="#">VW</a>
      <a href="#">Audi</a>
      <a href="#">Porsche</a>
      <a href="#">Ford</a>
   </nav>
   <section>
      <h2>section</h2>
      <h1>Autobahnwahn</h1>
      <p>Seit zwei Jahren ist meine Arbeit in Düsseldorf. Meine Familie lebt dagegen in Hamburg. Und dazwischen ich, aber ganz cool. Vollbremskombination aus Ampel oder Einfädeln oder beides auf einmal. Geht nur mit Tricks. Eben noch kurz auf die A 52. Schon vielversprechend lebhaft.</p>
      <p>Hinter dem Breitscheider Kreuz geht es richtig los. Stau auf der A 3 bis Oberhausen. Danach entspannt es sich auch nur deshalb, weil enge Baustellen mit rüden Geschwindigkeitsbegrenzungen zum gleichmässigen Rollen zwingen. Es wird links überholt, es wird rechts überholt. Es wird gar nichts mehr, alles steht und macht lange Gesichter.</p>
   </section>
   <aside>
      <h2>aside</h2>
      <p>Hier stehen unwichtige Infos.</p>
   </aside>
</body>
</html>

Das sollte als Praxisfutter erst mal einige Zeit reichen.

Gruss

MrMurphy

[Franz]

Hallo,

und hier noch mal eine Testdatei, bei der die Höhe der Container durch ihren Inhalt bestimmt wird.

Wenn du dir die Datei so wie sie ist in verschiedenen Browsern anschaust sollte dir bei einem der "Standardbrowser" eine unterschiedliche Darstellung auffallen.

Nach einer Pause wieder zurück.
Ich habe es mit Google Chrome, SeaMonkey, Opera, Firefox und Safari angeschaut und keinen Unterschied feststellen können. Mit TextMate ich finde ich nicht wie man zum Browser schaltet.

/Grundeinstellungen/ body > * { padding: 0.5rem; border: 2px solid; border-radius: 0.5rem; margin: 0.5rem; }

Jetzt erkenne ich wie die einzelnen Boxen getrennt werden. Ich habe mich immer von der Graphik der Beispiele verleiten lassen. Die Zwischenräume zwischen den Kind-Elementen werden nicht automatische durch "display: flex;" erzeugt.

  nav {
  }
  section {
  }
  aside {
  }

}

Ich gehe davon aus, daß dies zur separaten, freien Gestaltung gemeint ist.

  body {
     display: flex;
     align-items: stretch;
     align-items: flex-start;
     align-items: baseline;
     align-items: center;
  }

Das erzeugt erst die unterschiedlichen Höhen der Kind-Boxen die sich dann am Textinhalt anpassen. Stretch wäre in diesem Fall unnötig. Durch "center", vermute ich, können auch baseline und flex-start wegfallen. Diese bekommen erst jeweils einen Sinn wenn man center weg läßt.

  nav {
     flex-basis: 20%;
  }
  section {
     flex-basis: 60%;
  }
  aside {
     flex-basis: 20%;
  }

Die richtige Größe wird dann eigentlich durch die Breite des Containers bzw. dem Zwischenraum erreicht?

  body {
     min-height: 100vh;
  }
  nav {
     /*height: 80px;*/
  }
  aside {
     /*height: 50px;*/
  }
  section {
     /*height: 150px;*/
  }
  section {
     /*min-height: 100px;*/
  }

Ist dies überhaupt erforderlich? Die Höhe paßt sich ja sowieso dem Inhalt an.

Auf alle Fälle habe ich einmal den Einblick bekommen. Mit der oben genannten Web-Seite bin ich nicht klar gekommen.

LG Franz

[MrMurphy1]

Hallo

Ich habe es mit Google Chrome, SeaMonkey, Opera, Firefox und Safari angeschaut und keinen Unterschied feststellen können.

Wieso vermisse ich den IE? Das ist ein Standardbrowser, mit dem alle halbwegs ernsthaften Webseiten geprüft werden sollten.

Jetzt erkenne ich wie die einzelnen Boxen getrennt werden. Ich habe mich immer von der Graphik der Beispiele verleiten lassen.

Wenn bei Beispielen in verschiedenen Containern immer der gleiche oder sehr ähnlicher Inhalt steht (seien es Zahlen oder immer die gleichen Sätze oder immer nur eine Überschrift) und / oder die Höhe künstlich bestimmt wird sind die Beispiele für die Praxis mit Vorsicht zu genießen. Das ist dann reine Theorie.

Die Zwischenräume zwischen den Kind-Elementen werden nicht automatische durch "display: flex;" erzeugt.

Das kommt auf die Breite der Container an. Wenn die Container keine 100% Breite ergeben kann der Abstand sehr wohl durch Flexbox erstellt werden.

  nav {
  }
  section {
  }
  aside {
  }

Ich gehe davon aus, daß dies zur separaten, freien Gestaltung gemeint ist.

Ja, bei Testdateien werden häufig CSS-Elemente ohne Inhalt erstellt. Die stören nicht und zum Testen können die dann einfach mit Anweisungen gefüllt werden.

  body {
     display: flex;
     align-items: stretch;
     align-items: flex-start;
     align-items: baseline;
     align-items: center;
  }

Das erzeugt erst die unterschiedlichen Höhen der Kind-Boxen die sich dann am Textinhalt anpassen.

Nein. Auch das ist eine übliche Vorgehensweise bei Testdateien mit CSS. Ein Grundprinzip von CSS ist es das nachfolgende Anweisungen bereits bestehende überschreiben. So hat man bereits mehrere Anweisungen im CSS stehen und nur die unterste ist gültig. Wenn ich die Anweisung mit dem Wert baseline ausprobieren möchte schiebe ich die einfach nach unten. So muss ich mir erstens keine Gedanken machen wie die Anweisungen korrekt geschrieben werden und zweitens kann mein Editor ganze Zeilen mit einer Tastenkombination verschieben. So kann ich die unterschiedlichen Anweisungen Ruck-Zuck wechseln und testen - Testdatei halt. Von den vier align-items-Anweisungen sind die ersten drei also ohne Funktion.

  nav {
     flex-basis: 20%;
  }
  section {
     flex-basis: 60%;
  }
  aside {
     flex-basis: 20%;
  }

Die richtige Größe wird dann eigentlich durch die Breite des Containers bzw. dem Zwischenraum erreicht?

Ich verstehe nicht so ganz was du meinst, aber wahrscheinlich hast du recht.

  body {
     min-height: 100vh;
  }
  nav {
     /*height: 80px;*/
  }
  aside {
     /*height: 50px;*/
  }
  section {
     /*height: 150px;*/
  }
  section {
     /*min-height: 100px;*/
  }

Ist dies überhaupt erforderlich? Die Höhe paßt sich ja sowieso dem Inhalt an.

Die Höhenangaben sind auskommentiert. Zum Testen kann die Kommentierung entfernt und die Werte angepasst werden. Auch das ein übliches Vorgehen bei Testdateien.

Die Höhe des body dient in diesem Fall dem Testen von align-Anweisungen.

Mit der oben genannten Web-Seite bin ich nicht klar gekommen.

Das liegt an den fehlenden Grundlagen. Die kannst du nicht innerhalb von ein paar Wochen lernen.

Gruss

MrMurphy

[Franz]

Wieso vermisse ich den IE? Das ist ein Standardbrowser, mit dem alle halbwegs ernsthaften Webseiten geprüft werden sollten.

Ich arbeite mit Mac. Wußte gar nicht, daß es den IE für Mac gibt? Soviel ich aus Büchern und anderen Foren weiß macht der IE die größeren Probleme.

Die Zwischenräume zwischen den Kind-Elementen werden nicht automatische durch "display: flex;" erzeugt.

Das kommt auf die Breite der Container an. Wenn die Container keine 100% Breite ergeben kann der Abstand sehr wohl durch Flexbox erstellt werden.

Aha! Immer fällt einem Neuling nicht auf was man alles testen kann oder soll. Gott sei Dank gibt es ja das Forum.

  body {
     display: flex;
     align-items: stretch;
     align-items: flex-start;
     align-items: baseline;
     align-items: center;
  }

Das erzeugt erst die unterschiedlichen Höhen der Kind-Boxen die sich dann am Textinhalt anpassen.

Nein. Auch das ist eine übliche Vorgehensweise bei Testdateien mit CSS. Ein Grundprinzip von CSS ist es das nachfolgende Anweisungen bereits bestehende überschreiben. So hat man bereits mehrere Anweisungen im CSS stehen und nur die unterste ist gültig. Wenn ich die Anweisung mit dem Wert baseline ausprobieren möchte schiebe ich die einfach nach unten. So muss ich mir erstens keine Gedanken machen wie die Anweisungen korrekt geschrieben werden und zweitens kann mein Editor ganze Zeilen mit einer Tastenkombination verschieben. So kann ich die unterschiedlichen Anweisungen Ruck-Zuck wechseln und testen - Testdatei halt. Von den vier align-items-Anweisungen sind die ersten drei also ohne Funktion.

Das Grundprinzip des Überschreibens ist mir ja klar aber, daß man so üben kann fällt einem manchmal nicht selbst ein.

  nav {
     flex-basis: 20%;
  }
  section {
     flex-basis: 60%;
  }
  aside {
     flex-basis: 20%;
  }

Die richtige Größe wird dann eigentlich durch die Breite des Containers bzw. dem Zwischenraum erreicht?

Ich verstehe nicht so ganz was du meinst, aber wahrscheinlich hast du recht.

Ich meinte, daß durch die Prozentangabe, die sich an der Breite des Containers richtet, die richtige Größe erreicht wird.

  body {
     min-height: 100vh;
  }
  nav {
     /*height: 80px;*/
  }
  aside {
     /*height: 50px;*/
  }
  section {
     /*height: 150px;*/
  }
  section {
     /*min-height: 100px;*/
  }

Ist dies überhaupt erforderlich? Die Höhe paßt sich ja sowieso dem Inhalt an.

Die Höhenangaben sind auskommentiert. Zum Testen kann die Kommentierung entfernt und die Werte angepasst werden. Auch das ein übliches Vorgehen bei Testdateien.

Die Höhe des body dient in diesem Fall dem Testen von align-Anweisungen.

Ich habe schon ein paar mal gehört, daß man die Höhenangaben flexibel lassen soll. In diesem Fall werden aber auch feste Höhen angegeben. Ist es nicht so, daß dadurch ein größerer Inhalt zum scrollen gezwungen wird? Bei kleineren Bildschirmen dürfte es dann kein Problem geben. Bei der Breitenangabe würde ich dann eher zur flexiblen Prozentangabe tendieren.

Mit der oben genannten Web-Seite bin ich nicht klar gekommen.

Das liegt an den fehlenden Grundlagen. Die kannst du nicht innerhalb von ein paar Wochen lernen.

Vor allem, wenn sich immer wieder neuere Aspekte ergeben die wiederum geübt werden sollen um die Zusammenhänge zu verstehen.

LG Franz

[Gunnar Bittersmann]

@@MrMurphy1

Die Abmessungen der entscheidenen Elemente sollten sichtbar gemacht werden, am besten durch Rahmen.

Aber Vorsicht! border verändert andere Größen. outline tut das nicht und ist für Testzwecke bevorzugt einzusetzen.

Ich denke nicht das dir meine Minimal-Datei weiterhilft, da du sie nicht verstehen wirst.

Was du immer zeigst, ist keine Minimal-Datei.

Ich kann dir in einem weiteren Beitrag aber meine Linksammlung zu Flexbox-Seiten und -Videos zur Verfügung stellen. […] Da ich keine Lust habe die Links in das Forumformat umzuwandeln werde ich die als komplette HTML-Quelldatei zur Verfügung stellen.

Du kannst nicht mit regulären Ausdrücken umgehen?

<a href="([^"]+)">([^<]+)</a> ersetzen durch [$2]($1) – so einfach geht’s. <ins>Ich hab das mal für dich gemacht.</ins>

LLAP 🖖

[MrMurphy1]

Hallo

... aber auch als Anfangsspielereien nicht sehr hilf- und lehrreich.

Ja klar, ich habe dir auch nicht empfohlen die Beispiele zu ignorieren. Du musst halt bloß im Hinterkopf behalten, dass sie für die Praxis teilweise falsche Vorstellungen vermitteln. Aber das merkst du grade selbst.

Einerseits wird gedrängt anstatt „float“ eher „flexbox“ zu verwenden,...

Nein, empfohlen.

Im Gegensatz zum Float wurde Flexbox speziell zum Erstellen von Layouts entwickelt. Und zwar aktuellen, die im Zusammenhang mit Media Queries eine flexible Ansicht in möglichst vielen Fenstergrößen ermöglichen.

Ist das so gewünscht, daß mit flexbox alle die gleiche Höhe haben?

Als Vorgabe - ja. Aber dass kannst du schließlich auch ändern, siehe align-items.

andererseits gibt es dazu keine verständlichen Anleitungen

Weil viele altgediente Webseitenersteller damit (noch?) überfordert sind. Das ist ein ähnlich radikaler (aber sinnvoller) Schritt wie vom Tabellen- zum CSS-Layout.

Auch hier vermisse ich entsprechende Beispiele.

Die Infos zu Flexbox sind etwas versteckt, siehe zum Beispiel

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox

oder

http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout

Gruss

MrMurphy

[franzsen]

Die Infos zu Flexbox sind etwas versteckt, siehe zum Beispiel

http://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Gr%C3%B6%C3%9Fenangaben/Flexbox

Dieses Beispiel zeigt aber keine Verschiebung (.ausnahme) oder verstehe ich da etwas falsch?

oder

http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/flexibles_Layout

Diese muß ich mir erst genauer ansehen.

[Gunnar Bittersmann]

@@franzsen

Auf der Webseite steht folgendes: Auch ohne diese explizit gesetzte Eigenschaft werden alle Flexbox-Elemente auf die gleiche Höhe gestreckt. Alleine die Höhenangabe reicht aus, auch wenn sie nur für ein Element in einer Reihe vergeben ist, damit alle Elemente die gleiche Höhe annehmen.

Ich finde aber kein Beispiel wie man jedem Element (nav, aside) eine eigene Höhe zuordnen kann? Würde die nächsten Beispiele (align-items: center, ...;) besser unterscheiden können.

Die gleiche Höhe kommt daher, dass stretch der Defaultwert für die Eigenschaft align-items ist. [Guide] Wenn du das anders willst, musst du einen anderen Wert angeben.

LLAP 🖖

[franzsen]

Die gleiche Höhe kommt daher, dass stretch der Defaultwert für die Eigenschaft align-items ist. [Guide] Wenn du das anders willst, musst du einen anderen Wert angeben.

Ich habe „stretch“ einmal gelöscht, anderen andere Werte eingegeben, etc. Auch habe ich in „aside“ mehr Text eingegeben und trotzdem wachsen alle in der gleichen Höhe mit. Komme nicht auf ein gewünschtes Ergebnis. Normal sollten „header“ oder „footer“ eine geringere Höhe haben.

[MrMurphy1]

Hallo,

stehen header und footer denn auch in separaten Zeilen?

Dann werden sie nur so hoch wie ihr Inhalt es erfordert.

Gruss

MrMurphy

[franzsen]

Hallo,

stehen header und footer denn auch in separaten Zeilen?

Dann werden sie nur so hoch wie ihr Inhalt es erfordert.

Auf der Seite https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ist es beispielsweise das letzte Beispiel. Wenn ich Result drücke bekomme ich ein anderes Ergebnis. Bei mir ist es eine lange Wurst und nicht unterteilt in
Header aside 1/Inhalt/aside 2 footer

Hier finde ich keinen code wo eine Box in die nette Zeile rutscht.

[MrMurphy1]

Hallo,

Bei mir ist es eine lange Wurst und nicht unterteilt in

Header aside 1/Inhalt/aside 2 footer

Auf der Webseite "A Complete Guide..." oder bei deinem selbst erstellten Beispiel?

Gruss

MrMurphy

[franzsen]

Hallo,

Bei mir ist es eine lange Wurst und nicht unterteilt in Header aside 1/Inhalt/aside 2 footer

Auf der Webseite "A Complete Guide..." oder bei deinem selbst erstellten Beispiel?

Bei meinem Beispiel das aber eine Kopie der Daten sein soll. Ich habe den Code verglichen und es dürfte 1:1 kopiert haben.

[Gunnar Bittersmann]

@@franzsen

Ich habe „stretch“ einmal gelöscht

Gelöscht? Man kann Defaultwerte nicht löschen, nur überschreiben.

Komme nicht auf ein gewünschtes Ergebnis.

Lass mal sehen.

LLAP 🖖

[franzsen]

@@franzsen

Ich habe „stretch“ einmal gelöscht

Gelöscht? Man kann Defaultwerte nicht löschen, nur überschreiben.

Ist mir klar. Flex hat eine Standardhöhe die mit dem Inhalt mit wächst oder eine vorgegebene Höhe bekommt, also überschrieben wird.

Komme nicht auf ein gewünschtes Ergebnis.

Lass mal sehen.

<!doctype html>
<html lang="de">

<head>
	<meta charset="utf-8" />
	<title></title>

<style>
nav {
	background-color: red;
	border: 2px solid;
	border-radius: 1em;
	}
section {
	background-color: aqua;
	border: 2px solid;
	border-radius: 1em;
	}
aside {
	background-color: yellow;
	border: 2px solid;
	border-radius: 1em;
	}

#beispiel {
	display: -webkit-flex;
	display: flex;
	align-items: center;
	}

#beispiel nav, aside {
	-webkit-flex-basis: 20%;
	flex-basis: 20%;
	}
#beispiel section {
	-webkit-flex-basis: 60%;
	flex-basis: 60%;
	}
section {
	min-height: 100px; /*Kein Einfluß wenn Inhalt größer. Alle bekommen trotz undterschiedlichem Inhalts gleiche Größe.*/
}
</style>
</head>

<body>

<div id="beispiel">
	<nav>
		<ul>
			<li>Zeile 1</li>
			<li>Zeile 2</li>
			<li>Zeile 3</li>
		</ul>
	</nav>
	<section>
		<p>Inhalt</p>
		<p>Inhalt</p>
		<p>Inhalt</p>
		<p>Inhalt</p>
	</section>
	<aside>
		Aside
	</aside>
</div>

</body>
</html>

[Gunnar Bittersmann]

@@franzsen

Lass mal sehen.

<!doctype html>
…

„Lass mal sehen“ heißt nicht „lass mal Code sehen“, sondern „lass mal ein Online-Beispiel sehen“. Aber das sagte ich bereits.

LLAP 🖖

[Gunnar Bittersmann]

@@franzsen

Ich habe „stretch“ einmal gelöscht

Gelöscht? Man kann Defaultwerte nicht löschen, nur überschreiben.

Ist mir klar.

Scheint mir nicht so.

Du müsstest die Eigenschaft align-items auf einen anderen Wert als stretch setzen. Hast du das?

LLAP 🖖

[franzsen]

Ich habe „stretch“ einmal gelöscht

Gelöscht? Man kann Defaultwerte nicht löschen, nur überschreiben.

Ist mir klar.

Scheint mir nicht so.

Du müsstest die Eigenschaft align-items auf einen anderen Wert als stretch setzen. Hast du das?

Mit "klar" meinte ich, daß es jetzt klar ist. Das habe ich gemacht. Allerdings beziehen sich die anderen Werte nur auf die Aufteilung nicht aber auf die Höhe der einzelnen Elemente und alle Elemente bekommen die gleiche Höhe. In den Beispielen align-items sieht man Elemente mit unterschiedlichen Höhen, sodaß anzunehmen ist, daß jedes Element in seiner Höhe manuel angepasst werden kann.

Im Beispiel hier widerum werden Elemente anscheinend mit "ausnahme" verschoben. Wenn ich den code in meinen Editor kopiere passiert aber nichts.

Auf meinem Computer scheinen die Dinge ihr Eigenleben zu haben.

[MrMurphy1]

Hallo

Auf meinem Computer scheinen die Dinge ihr Eigenleben zu haben.

Das du die Bemerkung nicht ganz ernst meinst ist mir klar.

Der Quelltext aus deiner Verlinkung funktioniert wenn ich mir daraus eine Datei erstelle.

Da scheinen dir noch einige Grundlagen zu fehlen um einfache HTML-Dateien zu erstellen.

Gruss

MrMurphy

[franzsen]

Auf meinem Computer scheinen die Dinge ihr Eigenleben zu haben.

Das du die Bemerkung nicht ganz ernst meinst ist mir klar.

Der Quelltext aus deiner Verlinkung funktioniert wenn ich mir daraus eine Datei erstelle.

Sind die Beispiele etwa keine fertigen Dateien? Muß man sie erst abspeichern? Mit meinem Editor wird in der Regel alles richtig angezeigt; auch wenn ich es mit dem Browser aufrufe. Andere Editoren verlangen, daß die Datei erst gespeichert werden muß. Also ich dachte schon, daß Beispiele funktionsfertig sein sollten.

Da scheinen dir noch einige Grundlagen zu fehlen um einfache HTML-Dateien zu erstellen.

Welche Grundlagen sollen das sein?

[Camping_RIDER]

Aloha ;)

Sind die Beispiele etwa keine fertigen Dateien? Muß man sie erst abspeichern? Mit meinem Editor wird in der Regel alles richtig angezeigt; auch wenn ich es mit dem Browser aufrufe. Andere Editoren verlangen, daß die Datei erst gespeichert werden muß. Also ich dachte schon, daß Beispiele funktionsfertig sein sollten.

Hm, ich glaube ich erinnere mich... Warst du nicht der, der seine HTML- und PHP-Dateien in einem vollkommen veralteten Editor-IDE-Werkzeug bastelt, das dir das direkt als Beispiel anzeigt? Bist du dieser Franz?

Sollte das so sein (davon gehe ich im Folgenden mal aus), dann kann ich nur meine Aussage wiederholen:

Übrigens: du solltest dich eventuell nach einer Alternative umsehen, meiner kurzen Recherche nach hat Taco Software dicht gemacht und Taco HTML Edit wird dementsprechend in Zukunft nicht weiter mit Support und Updates versorgt.

Da dein Tool vom Hersteller nicht mehr unterstützt wird und veraltet ist, darfst du dich nicht wundern, wenn Ergebnisse abweichen - vor allem wenn es um ein Thema wie flexbox geht, das von Browsern standardmäßig (ohne Prefix) noch gar nicht so lange interpretiert wird.

Da scheinen dir noch einige Grundlagen zu fehlen um einfache HTML-Dateien zu erstellen.

Welche Grundlagen sollen das sein?

Wenn meine obigen Annahmen stimmen: Lerne eine HTML-Datei, mit einem Standard-Editor (Notepad, Notepad++, Sublime Text, Geany, vim, emacs, TextMate, oder was auch immer) zu erstellen und deine Tests dann an der fertigen Datei im Browser der aktuellen Generation anzustellen, statt dich auf die Implementierung in deinem veralteten Editor zu verlassen.

Sollten meine Annahmen nicht stimmen, nehme ich meine Aussagen natürlich zurück.

Grüße,

RIDER

[franzsen]

Hm, ich glaube ich erinnere mich... Warst du nicht der, der seine HTML- und PHP-Dateien in einem vollkommen veralteten Editor-IDE-Werkzeug bastelt, das dir das direkt als Beispiel anzeigt? Bist du dieser Franz?

Ja.
Vollkommen veraltet ist zwar übertrieben; immerhin aus dem Jahre 2014.

Da dein Tool vom Hersteller nicht mehr unterstützt wird und veraltet ist, darfst du dich nicht wundern, wenn Ergebnisse abweichen - vor allem wenn es um ein Thema wie flexbox geht, das von Browsern standardmäßig (ohne Prefix) noch gar nicht so lange interpretiert wird.

Das dürfte tatsächlich der Grund sein. Ich habe jetzt „BlueGriffon“ in Verwendung und obwohl das Programm die Version von 2013 hat dürfte es ausgereifter sein als das von Taco. Ich habe den genannten Code rüber kopiert und tatsächlich funktioniert das Beispiel „Verwendung von order“ ohne es speichern zu müssen.

Wenn meine obigen Annahmen stimmen: Lerne eine HTML-Datei, mit einem Standard-Editor (Notepad, Notepad++, Sublime Text, Geany, vim, emacs, TextMate, oder was auch immer) zu erstellen und deine Tests dann an der fertigen Datei im Browser der aktuellen Generation anzustellen, statt dich auf die Implementierung in deinem veralteten Editor zu verlassen.

Ja, da werde ich alles nochmals mit dem anderen Programm durchnehmen. „BlueGriffon“ hat zwar WYSIWYG aber trotzdem wird mir Taco HTML Edit abgehen. Es war einfach Anwenderfreundlich wenn man den Code eingab und auf der Seite gleich das Ergebnis sah ohne herumdrücken zu müssen. Ich habe zwar noch Bluefish, BBedit, Brackets und NetBeans probiert aber ich finde BlueGriffon praktikabler.

Die Editoren die Du anführst sind eher für Windows, ich habe einen Mac.

[Gunnar Bittersmann]

@@franzsen

Die Editoren die Du anführst sind eher für Windows, ich habe einen Mac.

Sublime Text und TextMate sind für Mac.

LLAP 🖖

[jeena]

Hej!

Sublime Text und TextMate sind für Mac.

Sowie vim und emacs.

ciao, Jeena

[Camping_RIDER]

Aloha ;)

Sublime Text und TextMate sind für Mac. Sowie vim und emacs.

Und Geany gibt es unter Windows, Linux und Mac.

Grüße,

RIDER

[Gunnar Bittersmann]

@@jeena

Sublime Text und TextMate sind für Mac. Sowie vim und emacs.

Letztere sind für Nerds, nicht für Mac. ;-)

LLAP 🖖

[Christian Kruse]

Hallo Gunnar,

Sowie vim und emacs.

Letztere sind für Nerds, nicht für Mac. ;-)

Wenn du dich da mal nicht vertust. Ich kenne mindestens einen Journalisten (der im übrigen gar nicht mal so „tech-savy“ ist), der Emacs verwendet - und zwar wegen Org-Mode.

LG,
CK

[Camping_RIDER]

Aloha ;)

Gut, dass ich dich zur Aufgabe von Taco überreden konnte ;)

Ja, da werde ich alles nochmals mit dem anderen Programm durchnehmen. „BlueGriffon“ hat zwar WYSIWYG aber trotzdem wird mir Taco HTML Edit abgehen. Es war einfach Anwenderfreundlich wenn man den Code eingab und auf der Seite gleich das Ergebnis sah ohne herumdrücken zu müssen. Ich habe zwar noch Bluefish, BBedit, Brackets und NetBeans probiert aber ich finde BlueGriffon praktikabler.

Vorsicht: Ich habe nicht ohne Grund eine Liste von Beispielen angegeben. Das, was dir MrMurphy mit auf den Weg geben wollte, war, dass du dich vielleicht noch einmal grundsätzlich damit beschäftigen solltest, wie HTML-Dateien entstehen. Damit wollten wir nicht sagen, dass du nach (löblicherweise) Aufgabe der einen vollintegrierten Entwicklungsumgebung direkt in die andere vollintegrierte Entwicklungsumgebung wechseln sollst - sondern dass du dich mal mit einem reinen Klartexteditor (gerne auch einem smarten wie das Gros der von mir Genannten es ist) auseinandersetzen sollst.

Es geht nicht unbedingt darum, mit was du nachher produktiv arbeitest - ob du jetzt am Ende Bluefish oder BlueGriffon oder NetBeans oder einen Klartexteditor einsetzt, ist eigentlich egal; aber dir muss eigentlich, um irgendein Verständnis, auch für kommende Problemlösungen, entwickeln zu können, klar sein, wie man ein HTML-Dokument mit nichts als einem Texteditor zusammenschraubt. Wenn du das verinnerlicht hast nimm gerne WYSIWYG so viel du willst, aber diese Grundlage solltest du klar verinnerlicht und immer im Hinterkopf haben.

Die Editoren die Du anführst sind eher für Windows, ich habe einen Mac.

Nur zwei der angegebenen Editoren sind Windows-only, alle anderen gibt es auch für den Mac (ich wusste, dass du Mac-User bist) und alle von denen (außer TextMate) gibt es auch unter Linux. Wenn du noch einen Tipp brauchst, mit welchem Klartexteditor du arbeiten sollst: @Gunnar Bittersmann schwört auf TextMate, ich auf Geany und @Christian Kruse hält Sublime Text für beliebt, wie in diesem aktuellen Thread nachzulesen ist. Alle drei beherrschen Syntaxhighlightning und teils auch andere, sinnvolle "Erleichterungen" (auto-Vervollständigung etc). vim und emacs sind für das Testen von Grundlagen wie in deinem speziellen Fall nicht ganz so empfehlenswert, weil beide eine gewisse Einarbeitungszeit benötigen.

Grüße,

RIDER