Flexbox layout 这种布局方案是W3C在2017年10月提出的一个候选方案，目的是提供一个更高效的布局方法来实现容器中元素的对齐和空间的分配，即使它们的大小未知。 这背后主要的思想就是赋予容器改变它内部元素(宽/高)的能力，使它们能够填充可用的空间，可以适应各种设备的不同屏幕尺寸。 最重要的是flexbox 布局是一种可以适应不同方向的布局方式，相比于传统的布局方式：块状元素是基于纵向排列，行内元素基于水平排列,这种方式在每个页面中 表现尚好，但如果应用复杂，尤其是屏幕的方向发生变化或者进行了缩放，这种方式就变得不够灵活。

相关术语

flexbox 是一个完整的模块而不是一个单独的属性，它包含了许多的内容。其中就包括设置父元素 为"flex container" 而有的属性是设置子元素为"flex items"。flex 布局 基于"flex-flow direction"，如图： 这种方式将会按照main axis(主轴)方向或者cross axis(交叉轴)方向放置元素。

Flexbox属性

父元素属性

.container {
    diaplay: flex;
}

这样就可以定义一个flex属性的容器，为它的子元素提供一个flex的上下文环境。

1. flex-direction

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap (default): 所有子元素都会放在一行 wrap: 所有子元素会被包裹进多行，从上到下 wrap-reverse: 所有子元素会被包裹进多行，从下到上

3. justify-content

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

这个属性定义了主轴的对齐方式。

5. align-items

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

这个属性定义了交叉轴的对齐方式。

6. align-content

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

这个属性设置了容器的内容在交叉轴有额外空间时的对齐方式

子元素属性

1. order

.item {
  order: 5; /* default is 0 */
}

可以改变子元素的默认排序

2. flex-grow

.item {
  flex-grow: 4; /* default 0 */
}

这个属性定义了子元素拥有自动增长的能力。如果每个子元素的flex-grow都设置为1，那么容器中的剩余空间会被均匀的分配给每一个元素。

3. flex-shrink

.item {
  flex-shrink: 3; /* default 1 */
}

这个属性定义了子元素可以缩小的程度。

4. flex-basis ...

5. flex ...

6. align-self

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

这个属性可以给目标子元素覆盖默认的对齐方式

贴上原文链接