Lösung Flexbox-Übung

dabblet.css

/**
 * Lösung Flexbox-Übung
 */

/* Flexbox auf dem Wrapper macht schönere Margins */
#wrapper {
  display: flex;
  flex-direction: column; 
  max-width: 1024px;
}

/* Grobes Header-Layout mit Umbruch für die Navi */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
nav {
  width: 100%;
}

/* Link-Verteilung in der Navi */
nav {
  display: flex;
  justify-content: space-between;
}

/* Feinjustierung Login-Box */
#login {
  align-self: flex-start;
}
#login p {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hauptinhalt */
main {
  display: flex;
}
main > aside {
  flex: 0 0 280px; /* Statisch */
}
main > section {
  flex: 1 1 auto; /* Dynamisch wachsend */
}

/* Sortierung in der Sidebar */
aside {
  display: flex;
  flex-direction: column;
}
aside section:last-child {
  order: -1; /* Suche nach oben */
}

/* Footer */
footer {
  display: flex;
  justify-content: space-between;
}
footer section {
  flex: 1 1 0; /* Alle Sections gleich groß */
}

/* Einspaltiges Layout bei Platzmangel */
@media all and (max-width:800px){
  main, footer {
    flex-direction: column;
  }
  /* Header bricht wegen flex-wrap:wrap automatisch um */
}

/* Einspaltige Navi bei großem Platzmangel */
@media all and (max-width:640px){
  nav {
    flex-direction: column;
  }
}

dabblet.html

<!--
  DIESES HTML NICHT BEARBEITEN!
  Du schaffst die Übung locker auch so
-->

<div id="wrapper">
  <header>
    <h1>ACME Inc.</h1>
    <div id="login">
      <p><label for="user">Username:&nbsp;</label> <input type="text" id="user"></p>
      <p><label for="pw">Passwort:&nbsp;</label> <input type="text" id="pw"></p>
    </div>
    <nav>
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
      <a href="#">Link 4</a>
      <a href="#">Link 5</a>
      <a href="#">Link 6</a>
      <a href="#">Link 7</a>
    </nav>
  </header>
  <main>
    <section id="content">
      <h2>Willkommen beim globalen Marktführer</h2>
      <p>
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
        Content Content Content Content Content Content Content Content Content
      </p>
    </section>
    <aside>
      <section><p>Widget A</p></section>
      <section><p>Widget B</p></section>
      <section><p>Widget C</p></section>
      <section><p>Suchwidget</p></section>
    </aside>
  </main>
  <footer>
    <section><p>Über uns</p></section>
    <section><p>Support</p></section>
    <section><p>International</p></section>
    <section><p>Investor Relations</p></section>
  </footer>
</div>

<style>

/*
  ***************************************************************
  DIESES CSS NICHT BEARBEITEN!
  Baselte dein Flexbox-Layout im Tab "CSS & Result" (oben rechts)
  ***************************************************************
*/

* {
  box-sizing: border-box;
}

html, a {
  font-family: Arial, sans-serif;
  color: #FFF;
  padding: 0.5rem;
}

#content p {
  text-align: left;
}

#wrapper, main, section, aside, header, footer, nav, a, h1, #login {
  margin: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
}
h2 {
  margin: 1rem 0.5rem;
}

#login p {
  font-size:0.8rem;
  margin: 0;
}

h1 {
  font-size:4.5rem;
  padding: 0.5rem;
}

p, a {
  text-align: center;
  padding: 0.5rem;
}

</style>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}