flex item使用position:absolute
设置了position:absolute的flex item受三个方面的影响：
-
justify-content影响 - 给自身添加的
top left right bottom - 自身添加的
margin
对比这三者可以看一下这个例子
代码示例
53ABCE13-4EA5-45ED-997B-FC26F5163005.png
我们只给这里我们只给2号添加了
position:absolute;会发现2号还是受justify-content:center;的影响。并且flex-basis会失效为了验证align-items是否作用，我在只留了2号其他全部删除的情况下，得到如下图。可以得知flex item在设了absolute不受align-item的影响，但是收到justify-content的影响。
DB913F45-8002-49CB-A584-7EF44FB8A27C.png
在另外给2号添加了left和bottom等定位信息，2号元素脱离了justify-content的影响。代码
巧用margin与flex的结合
使用
flex与margin:auto进行居中对齐;
代码如果在多个flex item下面是用margin:auto;与在父容器下设置
justify-content:center;align-items:center;没多大区别。-
如果你在多个flex item下指定某个item的某个方向的margin使用auto那么，容器的
justify-content就会失效，并且会把所有的剩余空间全部分配给制定的item;
在经过上面代码的改装，给box多添加几个li元素并且制定第一个的margin-right:auto;。会出现如图以下效果：代码
1B5FF34A-0984-458C-9643-DDDA1A8F8DF0.png
我们也可以再改装一下，给1号元素再添加margin-left:auto;会出现如下：
B567E14F-36E8-4FD3-A348-8529AB8D7E84.png
最后，推荐几篇别人写的很好的博客理解flex
本篇博客各位看官了解就行，在苹果手机下可能会有bug。
