Algorithmische Layouts

Verpassen Sie nicht dieses Video von Heydon, das sich mit CSS-Layouts beschäftigt. Es ist großartig, wie er grundlegendes Wissen, wie das Fließen von Elementen, Umbrüche und Ränder, mit neuen Layoutmethoden wie Flexbox und Grid (mit spezifischen Beispielen) kombiniert. Besonders hervorzuheben ist die klare Demonstration, wie Flexbox und Grid dazu beitragen, die Notwendigkeit ständiger Eingriffe mit Media Queries zur Beeinflussung responsiver Layouts zu vermeiden.

Anstatt also dies…

.sidebar {
  float: left;
  width: 20rem;
}

.not-sidebar {
  float-right: calc(100% - 20rem);
}

@media (max-width: 40rem) {
  .sidebar, .not-sidebar {
    float: none;
    width: auto.
  }
}

…etwas wie dies

/* Parent container */
.with-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.sidebar {
  flex-basis: 20rem;
  flex-grow: 1;
}

.not-sidebar {
  min-width: 50%;
  flex-grow: 600;
}

Das ist auch kein einmaliges Video, Heydons Kanal hat Videos über das Erstellen ungewöhnlicher Formen und benutzerdefinierter Eigenschaften.

Direkter Link →