对于Flex box的一些理解

flex item使用position:absolute

设置了position:absolute的flex item受三个方面的影响：

1. justify-content影响
2. 给自身添加的top left right bottom
3. 自身添加的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。