如果你未阅读第一部分，强烈建议您先花点时间阅读第一部分

运用于Flex项目属性

运用于Flex项目中的CSS属性和运用于Flex容器上的属性类似，主要分为三个部分：对齐、尺寸 和 方向 三个部分：

align-self

在Flex容器中可以使用align-items来控制来控制Flex项目（所有Flex容器的子元素）在Flex容器侧轴方向的对齐方式。在Flexbox布局模块中，还可以使用align-self对单个Flex项目进行对齐方式的控制，同样是Flex容器侧轴方向的对齐。

align-self属性可接受的值主要有：

align-self: auto | flex-start | flex-end | center | baseline | stretch;

即使在Flex容器上显式设置了align-items用来控制所有Flex项目在Flex容器侧轴上的对齐方式，但只要在Flex项目上显式设置了align-self的值，则会覆盖align-items属性。只不过只对显式设置了align-self的Flex项目生效。比如下面这个示例，我们在Flex容器显式设置了align-items的值为center，并且对单数Flex项目显式设置align-self的值：

.flex__container {
    align-items: center;
    direction: ltr;
    writing-mode: horizontal-tb;
    flex-flow: row nowrap;
}

.flex__item:nth-child(odd) {
    algin-self: var(--flexSelf);
}

你将看到的效果如下：

这里需要特别提出的一点是：Flex项目的align-self显式设置值为auto时不会覆盖Flex容器的align-items;另外如果在Flex项目上显式设置margin的值为auto时，Flex项目的align-self值将会失效。

同样的，algin-self也会受direction和writing-mode取值的影响。

当Flex容器中有多行时，每一行会进行独立的布局，其中align-self属性每次仅作用于单独一行上的Flex项目；同时每一行侧轴长度指定为可容纳该行中的Flex项目（在依据align-self属性进行对齐之后）的最小值，并且这些行依据align-content属性在Flex容器中进行对齐。

order

在Flexbox布局模块中，我们除了在Flex容器上通过flex-direction来改变DOM源的顺序之外，还可以在Flex项目上显式设置order属性来改变DOM源顺序：

order: 0 || <number>

其中0为order的默认值，同时它可以接受正负值（整数值）。

比如上面示例中，每组中的第二个Flex项目order设置了不同的值：

• 第一组中Flex项目未显式设置order值（即默认值为0）
• 第二组中第二个Flex项目显式设置order的值为1，这个时候该Flex项目会排列在最末尾
• 第三组中第二个Flex项目显式设置order的值为-1，这个时候该Flex项目会排列在最前面

其中order值越大，Flex项目越后；反之越前：

order用来控制Flex项目顺序在布局中非常的实用，比如我们要构建一个多列布局：

<!-- HTML -->
<header>Header Section</header>
<main>
    <article>Article Section</article>
    <nav>Nav Section</nav>
    <aside>Aside Section</aside>
</main>
<footer>Footer Section</footer>

其中<article>放在<nav>和<aside>前面，主要是为了内容为先。针对这样的DOM结构，如果我们希望<nav>在<article>左侧，<aside>在<article>右侧时，order属性就可以起关键性的作用：

上面的示例中，在main:hover改变了<nav>和<aside>两个元素的order值：

nav {
    order: -1;
}

main:hover nav {
    order: 1;
}

main:hover aside {
    order: -1;
}

这个时候看到的效果如下：

flex

flex属性主要用来让Flex项目如何伸长或缩短以适应Flex容器中的可用空间。它是一个简写属性，即：

flex: [<flex-grow><flex-shrink>?||<flex-basis>]

其中：

flex-grow: <number> 
flex-shrink: <number>
flex-basis: content | <width>

这几个属性都有其初始值：

• flex-grow的初始值为0
• flex-shrink的初始值为1
• flex-basis的初始值为auto

即 flex的初始值为0 1 auto。换句话说，如果需要重置flex属性的话，可以将其值设置为none。它的实际语法是：

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

在Flexbox布局模块中，flex是一个复杂的属性，从上面的语法规则上不难发现，flex属性可以指定 1个值（单值语法）、2个值（双值语法） 或 3个值（三值语法）。

单值语法：值必须为以下其中之一：

• 一个无单位的数（<number>），比如flex: 1，这个时候它会被当作<flex-grow>的值
• 一个有效的宽度（width）值，比如flex: 30vw，这个时候它会被当作<flex-basis>的值
• 关键词 none、auto或initial（即初始值）

有关于initial更详细的介绍，可以阅读《图解CSS：CSS层叠和继承》一文。

双值语法：第一个值必须为一个无单位数值，并且它会被当作<flex-grow>的值；第二个值必须为以下之一：

• 一个无单位的数（<number>），它会被当作<flex-shrink>的值
• 一个有效的宽度（width）值，它会被当作<flex-basis>的值

比如：

flex: 1 2 » <flex-grow> <flex-shrink> » flex-grow: 1; flex-shrink: 2
flex: 2 30vw » <flex-grow> <flex-basis> » flex-grow: 2; flex-basis: 30vw

三值语法：

• 第一个值必须是一个无单位数（<number>），并且它会被当作<flex-grow>的值
• 第二个值必须是一个无单位数（<number>），并且它会被当作<flex-shrink>的值
• 第三个值必须为一个有效的宽度（width）值，并且它会被当作<flex-basis>的值

比如：

flex: 1 2 30vw » <flex-grow> <flex-shrink> <flex-basis> 
//等效于
flex-grow: 1;
flex-shrink: 2;
flex-basis: 30vw;

综合上述，flex属性的取值可以是：

• auto：Flex项目会根据自身的width和height来确定尺寸，但Flex项目根据Flex容器剩余空间进行伸缩。其相当于flex: 1 1 auto
• initial：Flex项目会根据自身的width和height来设置尺寸。它会缩短自身以适应Flex容器，但不会伸长并吸收Flex容器中的额外剩余空间来适应Flex容器。其相当于flex: 0 1 auto
• none：Flex项目会根据自身的width和height来设置尺寸。它是完全非弹性的（既不会缩短，也不会伸长来适应Flex容器）。其相当于flex: 0 0 auto
• <flex-grow>：定义Flex项目的flex-grow属性，取值为<number>
• <flex-shrink>：定义Flex项目的flex-shrink属性，取值为<number>
• <flex-basis>：定义Flex项目的flex-basis属性。若值为0，则必须加上单位，以免被视作伸缩性

在大多数情况下，开发者需要将flex设置为auto、initial、none或一个无单位的正整数。比如下面这个示例，你可以尝试着调整Flex容器的大小，来观察flex取这些值的差异：