Renato: Flexbox

Beitrag lesen

SELF-Forum

Flexbox

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

Hallo zusammen

Ich möchte meine Homepage mit Flexboxen gestalten. Doch dies gelingt mir nicht. Ich möchte auf der linken Seite ein Menü und rechts drei bereiche übereinander. Was ich bisher gemacht habe ist folgendes.

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
	<link rel="stylesheet" type="text/css" href="index.css">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>robbisoft</title>
  </head>
  <body>
  <div class="main">
    <div class="box">
		<div class="A">
		Menü
		</div>
		<div class="B">
		Text
		</div>
		<div class="C">
		Text 2
		</div>
	</div>
  </div>	
  </body>
</html>

CSS:

.main {
	display: block;
	/* für IE */
	
	background: #c4ced3;
	border-color: #8a9da8;
}

.box{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	aligen-items: flex-start;
	aligen-content: auto;
	background: #ccf;
}

.box div .A{
	oder: 1
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: stretch;
	align-self: auto;
	min-wodht: 1;
	min-height: auto;
}

.box div.B{
	oder: 2
	flex-grow: 0;
	flex-basis: 1;
	flex-shrink: auto;
	flex-self: auto;
	align-self: auto;
	min-width: 1;
	min-height: auto;
}

.box div.C{
	order: 3
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: auto;
	align-self: auto;
	min-width: 1;
	min-height: auto;
}

Was muss ich ändern, damit ich das gewünschte Resultat erhalte.

Gruss Renato

Beitrag melden
–
Informationen zu den Bewertungsregeln