[dafrk]

hallo,

ich arbeite mich gerade ein wenig in display:flex ein. Ich habe einige Basiserfahrung im Umgang mit HTML5/CSS3, bin aber noch lange kein Profi. Bis vor einiger Zeit habe ich ausschließlich float-Designs genutzt weil ich es nicht besser wusste. Irgendwann habe ich dann display:block-inline entdeckt und damit das float ins Jenseits geschickt, und jetzt bin ich auf die noch modernere Variante über flex gestoßen.

WAs ich aber noch nicht hinbekommen habe ist, dass die elemente, die ich aneinanderreihen möchte, automatisch ihre Breite anpassen, anstatt eine fixe Breite einzunehmen und eine neue Zeile zu eröffnen, wenn sie insgesamt zu breit für das Elternelement sind.

Hier habe ich eine Seite mit einer linken Navigation und einem Contentelement. Das contentelement ist voller Lorem Impsum und das Contentelement will daher 100% der Breite (wie beim body) einnehmen und fügt sich daher unter der linken Navigationsleiste ein. Wie bekomme ich hin, dass sich das Contentelement selber anpasst und ich dabei nur der Navigation eine feste breite geben muss, falls das möglich ist?

Das Design soll später responsiv werden, deswegen möchte ich so wenig feste breitenangaben wie nur irgend möglich haben.

Hier mein Code an den relevanten Stellen:

<div id="nav_and_content">
				<div id="nav_left">
					<aside id="search">
						<form action="#" method="post">
							....
						</form>
					</aside>
				</div>
<div id="content">
Lorem Ipsum...
</div>
</div>

hier das relevante CSS:

/*Seitenaufbau*/
html, body {
height: 100%; /*sorgt dafür, dass die Inhaltsbereiche immer so hoch sind wie das Browserfenster*/
/*ermöglicht die volle ausnutzung der Höhe mittels flex-box*/
}

body {
	width: 980px;
	margin: 0 auto;
}

[.... code dazwischen.... ]

/*Content und Seitennavigation*/

		#nav_and_content {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: flex-start;
			width: 100%;
		}
		/*die linke Navigationsleiste*/
		#nav_left {
			width: 200px;
			
		}

[MrMurphy]

Hallo,

Hier mein Code an den relevanten Stellen:

Leider nicht. Das ist eher eine Veralberung. Wenn damit eine Seite erstellt wird kommt das heraus:

HTML5 - dafrk: Flexbox

Das Design soll später responsiv werden, deswegen möchte ich so wenig feste breitenangaben wie nur irgend möglich haben.

Und warum gibst du dann body und nav_left feste Breiten in Pixel? Das passt doch nicht zum Responsive Design.

Außerdem sollte man die unnötigen divs weglassen. Eine Lösung mit Responsive Design und Flexbox könnte folgendermaßen aussehen:

HTML5 - dafrk: Flexbox

Da gibt es nur die notwendigen, HTML5-konformen, Elemente. Wenn die Navi-Spalte zu schmal wird und / oder der Zoom erhöht wird werden das nav- und das main-Element untereinander dargestellt.

Die Abstände können natürlich noch angepasst werden, das ist ja nur noch etwas Standard-CSS.

Gruss

MrMurphy

[dafrk]

hallo, danke schonmal bis hierher.

Ich möchte jetzt mit Flexbox Bilder verkleinern - mit der shrink-property kann ich sie aber nur entlang der main axis verkleinern. Wie verkleinere ich das Kind-Element gleichzeitig über die cross axis? Muss doch eine einfachere Lösung geben, als das ganze nochmal zu verschachteln und dann die elternelemente in column statt row zu setzen?

MfG

[MrMurphy]

Hallo

shrink-property

main axis

cross axis

nochmal zu verschachteln

die elternelemente in column statt row zu setzen

Nix verstehn.

Wenn Bilder sich flexibel dem umgebenden Element anpassen sollen wird das bei HTML / CSS mit der "max-width"-Anweisung erledigt. Das funktioniert natürlich auch innerhalb einer Flexbox.

Du solltest nicht dem Fehler unterliegen, das vom Float über display: inline zu Flexbox eine Entwicklung stattgefunden hat und Flexbox die beiden anderen Möglichkeiten ersetzt. Das sind drei unterschiedliche Methoden, die aktuell und für ihren jeweiligen Einsatzzweck am Besten geeignet sind. Jetzt "alles" mit Flexbox lösen zu wollen wäre falsch.

Nachfolgend mal zwei Beispiele, die ich für andere Fragen ohne Flexbox erstellt habe, dafür aber mit Responsive Design. Die Darstellung passt sich also der Fensterbreite an. Im ersten Beispiel nur teilweise, aber das ist beabsichtigt und steht entsprechend im Text:

HTML5 - Vier Bilder anordnen

und

HTML5 - AzRaIL Bilder

Wie schon geschrieben funktioniert das ganze auch innerhalb von Flexboxen.

Gruss

MrMurphy