A Complete Guide to Flexbox

[Pines-Cheng]

目前为止我能找得到的 Flexbox 最好、最全面资料：A Complete Guide to Flexbox —— CSS-Tricks，本来想翻译一下的，后来想了想，原文貌似也挺通俗易懂的，且图表丰富，而且在持续更新中，翻译过来反而本末倒置了，遂作罢。

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.
注意: Flexbox 布局最适合于应用程序的组件和小规模布局，而 Grid 布局适合于大规模布局。

Background

The Flexbox Layout (Flexible Box) module (a W3C Candidate Recommendation as of October 2017) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

Basics & Terminology 基础与术语

由于 flexbox 是一个完整的模块，而不是一个单独的属性，它涉及到很多东西，包括它的整个属性集。 其中一些被设置在容器上(父元素，称为“ flex 容器”) ，而另一些被设置在子元素上(称为“ flex 项”)。

Examples

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/* We tell all items to be 100% width, via flex-basis */
.wrapper > * {
  flex: 1 100%;
}

/* We rely on source order for mobile-first approach
 * in this case:
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/* Medium screens */
@media all and (min-width: 600px) {
  /* We tell both sidebars to share a row */
  .aside { flex: 1 auto; }
}

/* Large screens */
@media all and (min-width: 800px) {
  /* We invert order of first sidebar and main
   * And tell the main element to take twice as much width as the other two sidebars 
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Code Pen 示例

其他资源

• A Complete Guide to Grid
• Flexbox in the CSS specifications
• Flexbox at MDN
• Diving into Flexbox by Bocoup