Renato: Flexbox

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

  1. Flexbox

    MrMurphy1 (Versionen)
    – Informationen zu den Bewertungsregeln

    Hallo

    Ohne sinnvollen Inhalt lässt sich das nicht konkret beantworten.

    Grundsätzlich benötigst du im body zunächst zwei Container: Einen für das Menü, der andere enthält die anderen drei Container.

    Gruss

    MrMurphy

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Flexbox

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      @@MrMurphy1

      Grundsätzlich benötigst du im body zunächst zwei Container: Einen für das Menü, der andere enthält die anderen drei Container.

      Nicht, wenn man vernünftigerweise CSS-Grid einsetzt.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Flexbox

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Renato

    Ich möchte auf der linken Seite ein Menü und rechts drei bereiche übereinander.

    Macht 4 Bereiche. Im HTML-Quelltext: A, B, C. Macht 3. Das passt nicht zusammen.

    <!DOCTYPE html>
<html lang="de">
  <head>
	<link rel="stylesheet" type="text/css" href="index.css">
    <meta charset="utf-8" />

    Die Angabe der Zeichencodierung sollte als erstes im head stehen.

      <body>
  <div class="main">
    <div class="box">

    Wozu diese divs? Mit html und body sind bereits 2 Container-Elemente vorhanden.

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

    1. Deinen CSS-Code berichtigen; da sind einige Tippfehler drin. ☞ CSS Validation Service

    2. order rausschmeißen. Nicht verwenden, sonst wird die Seite womöglich kaum benutzbar.

    3. Wenn noch Fragen sind, deine Seite verlinken.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln