算法布局

不要错过 Heydon 的这段深入探讨 CSS 布局的视频。 他将基本知识（例如元素的流动、换行方式以及如何设置边距）与新的布局方法（如 Flexbox 和 Grid）相结合（包括具体的示例），这非常棒。 特别值得注意的是，视频清楚地展示了 Flexbox 和 Grid 如何帮助避免在响应式布局中不断使用媒体查询进行干预的需要。

所以，代替这个...

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

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

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

...像这样

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

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

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

这也不是一个一次性的视频，Heydon 的频道 还有关于创建不寻常形状和自定义属性的视频。

直接链接 →