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 的意思是收缩，结合它们的意思，不难联想到它们的作用是操控项目的伸缩的。也就是说：

1. 当水平方向上（因为当前是水平方向）的空间超过了所有项目 flex-basis 和 width 的总和时，浏览器会根据 flex-grow 的值将这些项目进行比例伸长
2. 当水平方向上空间不足时，浏览器会根据 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 这样只声明一个或者两个的情况，可以分为以下几种情况：

1. flex 取值为一个长度或者百分比，则这个值为 flex-basis的值，flex-grow取 1，flex-shrink取 1
2. flex 取值为两个非负数字时，分别作为flex-grow和flex-shrink的值，flex-grow取 0%
3. flex取一个非负数字和长度或百分比，则非负数字为flex-grow的值，长度或百分比为flex-basis的值，flex-shrink取 1

align-self

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

1. auto <默认值>
2. flex-start
3. flex-end
4. center
5. baseline
6. stretch

各取值的含义可以参见上一篇的 align-item 属性

嗯，图片也不放了，也不难理解（主要是懒）

自己在重新学习过 flex 以后发现，跟多之前靠大量 css 和 js 实现的布局，其实靠 flex 都可以很容易的实现，真是耗费了大量的时间和精力
但是有利有弊，如果是主要做 H5 的项目，这些属性都可以用上，几乎不会存在什么兼容的问题，顶多就是加上 -webkit 前缀；而如果是做需要兼容较老浏览器的项目的话，建议还是老老实实去写大量的 css 和 js 吧 : (

扫码关注前端周记公众号