Flex 弹性盒模型深度学习（二）—— Flex 项目

上一周的周记拖延到了今天才写，上周一直在练车，今天终于去考了科目二，很幸运的是一次通过。所以现在就来把上周的拖更补上啦！

上一篇文章详细介绍了 flex 容器上可以设置的属性，这些属性可以很方便的实现对容器内 flex 项目的布局。没有看过上一篇文章的小伙伴可以猛戳下面的链接：

Flex 弹性盒模型深度学习（一）—— Flex 容器

Flex 项目

除了作用在 flex 容器上的属性，也有作用在 flex 项目上的属性。Flex 项目上的属性是为了实现对这些项目布局更精细的控制。老套路，还是按照属性一个一个来说

PS:

以下所有的布局全部基于下面这个 flex 容器

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

order

字面意思是顺序，所以这个属性的作用就是，将 flex item 根据 order 的大小进行排序。order的值为整数类型，可以是负数、0 也可以是正数，数值越小，则这个项目的排列就越靠前

下图为未设置 order 时，各 flex 项目的正常排序：










当给各项目从左到右区别设置 order 为 2, 3, -1, 0 后，其排列顺序如下图所示：










flex-basis / flex-grow / flex-shrink
当单独使用flex-basis这个属性时，这个属性不会生效，它需要和另外两个属性flex-grow flex-shrink搭配使用才有效果，所以在这里把这三个属性放在一起
先来说 flex-basis，这个属性定义了一个项目的基础宽度。当我们定义的flex-direction方向上（当前为水平方向）的空间足够时，会按照flex-basis设置的值来决定项目的宽度，而忽略width属性

依旧是上面四个 flex 项目 0, 1, 2, 3，从左到右区别设置 css 为：

  .item-1 {
        flex-basis: 80px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .item-2 {
        flex-basis: 20px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .item-3 {
        flex-basis: 30px;
        flex-grow: 0;
        flex-shrink: 0;
    }
    .item-4 {
        flex-basis: 50px;
        flex-grow: 0;
        flex-shrink: 0;
    }

它们的基础属性为：

  .item {
        width: 40px;
        height: 40px;
        margin: 10px;
        border: 5px solid #deafcb;
    }

实际效果如下图所示：










每个项目都忽略了他们本来设置的width而该用flex-basis作为了自身的宽度

那么flex-grow和flex-shrink又有什么作用呢？首先还是从字面来看， grow 的意思是伸长，shrink 的意思是收缩，结合它们的意思，不难联想到它们的作用是操控项目的伸缩的。也就是说：
当水平方向上（因为当前是水平方向）的空间超过了所有项目 flex-basis 和 width 的总和时，浏览器会根据 flex-grow 的值将这些项目进行比例伸长当水平方向上空间不足时，浏览器会根据 flex-shrink将项目的宽度收缩
例如，将 item-1 和 item-2 的 flex-grow 设为 1 和 2，当空间多余时，多余空间会按照 1 : 2 的比例延伸 item-1 和 item-2 的宽，而 item-3 和 item-4 因为值为 0 所以不会被伸长；

又例如，将 item-3 和 item-4 的flex-shrink设置为 1 和 2，当空间不足时，浏览器会将不足的空间按照 1 : 2的比例在这两个项目上收缩，同样设置为 0 就不会被收缩

嗯，这两个属性没有配图，小伙伴们可以自己试试看，还是很好玩的， 借助这个属性可以写出很多有意思的布局

flex

这个属性其实是上面三个属性的简写，默认值是flex: 0 1 auto，区别对应flex-grow flex-shrink flex-basis的默认值

当设置flex: auto表示flex: 1 1 auto
当设置flex: none表示flex: 0 0 auto

flex 的取值有很多种情况，除了在flex中将三个属性都声明以外，还会出现如上面 auto 和 none 这样只声明一个或者两个的情况，可以分为以下几种情况：
flex 取值为一个长度或者百分比，则这个值为 flex-basis的值，flex-grow取 1，flex-shrink取 1flex 取值为两个非负数字时，区别作为flex-grow和flex-shrink的值，flex-grow取 0%flex取一个非负数字和长度或百分比，则非负数字为flex-grow的值，长度或百分比为flex-basis的值，flex-shrink取 1
align-self

Flex 容器上的 align-item 对容器内的所有项目生效，而 align-self 则可以对某一个项目进行单独的设置，从而实现其余项目排列在容器上面，而这个项目排列在容器下面的布局，取值有：
auto