Flexbox / horizontale Zentrierung (auf Viewport bezogen)

[marctrix]

Hej Fieterich,

[Vollzitat entfernt]

hier das Beispiel:

Link

Da ist ja einiges im HTML im Argen. Wenn irgendetwas nicht wie gewünscht klappt, immer erst mal den Validator fragen.

Wenn die HTMl-Fehler raus sind, wird es dennoch cniht funktionieren. Ich habe es mal angepasst, schau mal, ob Du es so gemeint hast:

	<container>
      <aside>
        <ul>
          <li>Icon1</li>
          <li>Icon2</li>
          <li>Icon3</li>
          <li>Icon4</li>
        </ul>
      </aside>
      <article>
        <h2>Lorem ipsum ...</h2>
        <div class="zweispaltig">
          <p>Lorem ...</p>
        </div>
      </article>
    </container> 

Wofür eigentlich das <div class="zweispaltig"> - wenn du da ran kommst, sollte das raus.

Entscheidende HTML-Änderung: die Links gehören in eine Liste!

Das CSS dazu:

 container {		
	display: flex;
	flex-flow: row-reverse wrap;
	height:auto;
}
 article, aside {
	border-radius: 0 0.5em 0.5em;
	border: 1px solid;
	padding: 0 10px;
	margin: 0 10px;
}
article {
	background: #F1F3F4;
	border-color: #d5d5d5;
	flex: 1 1 0;
	overflow-y: auto;
}
aside {
	background: #e9f3f8;
	border-color: #e9f3f8;
	flex: 0 0 10vh;
	margin: auto;
	text-align: center;
}

Für backgroundund borderdieselbe Farbe???

aside ul {
  position: fixed;
}

Das hält die Navi im sichtbaren Bereich - bitte gib noch an, wo die stehen soll

z.B.:

  right: 1em;
  top: center;

Die Frage ist dann aber, wozu du überhaupt flex-box verwendest.

Marc