center：各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。）

space-between：各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「flex-start」。在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。

space-around：各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于「center」。在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。

stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于「flex-start」。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。

Flex项目属性 order || flex-grow || flex-shrink || flex-basis order

oredr

允许Flex项目在一个Flex容器中重新排序。基本上，你可以改变Flex项目的顺序，从一个位置移动到另一个地方。

这不会影响源代码。这也意味着Flex项目的位置在HTML源代码中不需要改变。order属性的默认值是0。它可以接受一个正值，也可以接受一个负值。

值得注意的是，Flex项目会根据order值重新排序。从底到高。

<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>

默认情况下，所有Flex项目的order值都是0。把前面给列表的样式运用过来。看到的效果如下：

Flex项目显示是按HTML源代码中的顺序来显示，Flex项目1、2、3和4。

li:nth-child(1){ order:1 }

Flex项目就重新进行了排列，从低到高排列。不要忘记了，默认情况下，Flex项目2、3、4的order值为0。现在Flex项目1的order值为1

Flex项目2、3和4的order值都是0。HTML源代码秩序并没有修改过。如果给Flex项目2的order设置为2呢？

是的，你猜对了。它也增加堆栈。现在代表Flex项目的最高的order值。

flex-grow和flex-shrink

flex-grow和flex-shrink属性控制Flex项目在容器有多余的空间如何放大，在没有额外空间又如何缩小
它们可以接受0或大于0的任何正数

值为0

值为1

看下图会更好理解

flex-shrink值为0时他们不会缩小会保持原来的大小

注意：负数无效

flex-basis

这个属性和width，height属性相同，用来指定flex项目的大小

属性值：

.flex-item{ flex-bassis: auto || <width>; }

flex-basis指定了第四个flex项目的初始尺寸。

默认值: auto

flex

这个属性是flex-grow、flex-shrink和flex-basis的速写。

.flex-item{ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }

默认值: 0 ,1, auto

align-self

使用align-self属性可以指定flex项目自身的对齐方式或者使用align-items来指定单个flex项目。使用align-items对齐方式来解释flex容器，能更好的理解他们的值。

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

第三个和第四个flex项目使用align-self属性覆盖了其默认的对齐方式。

默认值: auto

注意： align-self取值为auto值时，flex项目对齐方式会根据其父元素align-items来决定。如果其元素设置为stretch值时或没有父元素时，align-self的值为auto时将无对齐方式一说。著作权归作者所有。

最后，如有错误和疑惑请指出，多谢各位大哥

查看原文： CSS Flexbox学习笔记