4.4：flex和之前的对比

flex主要用来排位置，具有强大的对齐能力
之前的确定位置，一般都是要靠 margin，padding，float，vertical，absolute等等。通过margin调上下左右的位置。
但是出现flex之后，他能把原来的块级元素或者行级元素直接进行排列。就不需要用到margin等。
所以排位置的时候多了一个选择，可以用flex。或者flex和margin一起用，就可以解决位置的问题。
举个例子：一、

上面可以怎么排位置？
1.小方框里面可以设置成

可以看到图片紧贴边框，那如何对img进行调整？
1）设置flex justify-content：center 2）设置img的margin-left
2.对整个大方框可以设置flex，也可以是margin-left
1）.以前的做法：用float，然后设置margin-left
2）.现在直接用margin-left，然后用flex


第一个是float，第二个是flex，所以我们知道，float还需要再设置一个li:last-child ，但是flex不用

二、
用下面的例子解释flex的强大

这个题一共有三种解法

1. 正常标签:img + margin-right

上面三个图是下面注释3的具体样子，红方框里就是对位置进行调整的语句。一共8句
所以第一种办法是：li设float，然后用margin调节li之间的位置，用margin调节li中img和div的位置，但是img和div位置很难调，只有一种方法：vertical-align。

1. span + span伪元素作为图片

上面两个图分别是div：：before中没有top和有top元素的表现
调位置的语句一共有：20行，而且这里html中div要写class
所以第二种方法是：li设float，然后用margin调节li之间的位置，用div的padding给伪元素留下空间，然后设伪元素为absolute，
用top和left来调节li中div和其伪元素的位置。可以说是及其繁琐了，因为还要进行计算。（如div的padding-left=伪元素的宽度+间距）

1. 用flex

调位置的语句只有5行
所以第三种办法是：用flex对li中的img和div来调位置，再用flex对ul中的li来调整位置。

点评：三种方法那个简单一目了然，这证明flex布局能力的强大

• {
  padding: 0;
  margin: 0;
  }
  ul {
  list-style: none;
  width: 250px;
  height: 50px;
  background: white;
  }
  li {
  float: left;
  margin-top: 16px;
  margin-right: 15px;
  border: 1px solid red;
  }
  li:last-child {
  margin-right: 0;
  }
  img {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  / vertical-align: middle; /
  }
  li>div {
  font-size: 12px;
  line-height: 12px;
  display: inline-block;
  padding-bottom: 10px;
  / 想办法让文字垂直居中 /
  / 1.vertical-align: top; 可以用。 ？不是float不能用vertical-align吗？
  这里li是float，但是li中的img和div并不是float，懂了吧
  如果是img设置vertical，要设置成middle，原理搜搜就知道了，这里不细讲/
  / 2.用float，即给li中的div和img再设个float，没有用，因为不是居中对齐 /
  / 3.用padding或者margin调位置：padding-bottom: 10px;
  然后觉得可能是没有设box-sizing: border-box;结果还是一样
  后来又觉得可能要给li设置一个border，这样就好了，结果还是一样，
  总之，img和div作为一个整体，只要一个有了margin或者padding，整个
  li盒子就有了，但是img和div的相对位置并不会发生改变/
  
  }

• {
  padding: 0;
  margin: 0;
  }
  ul {
  list-style: none;
  width: 250px;
  height: 50px;
  background: white;
  }
  li {
  float: left;
  margin-top: 16px;
  margin-right: 15px;
  / border: 1px solid red; /
  }
  li:last-child {
  margin-right: 0;
  }
  li>div {
  position: relative;
  font-size: 12px;
  line-height: 12px;
  padding-left: 22px;
  }
  li>div::before {
  content: “ “;
  position: absolute;
  width: 17px;
  height: 17px;
  left:0px;
  / top: -3px; /
  background-color: red;
  }
  .page::before{
  background: url() no-repeat center/contain;
  }
  .video::before {
  background: url() no-repeat center/contain;
  }
  .find::before {
  background: url() no-repeat center/contain;
  }
  .game::before {
  background: url() no-repeat center/contain;
  }

• {
  padding: 0;
  margin: 0;
  }
  ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  width: 250px;
  height: 50px;
  background: white;
  }
  li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  / border: 1px solid red; /
  }
  img {
  width: 17px;
  height: 17px;
  }
  li>div {
  font-size: 12px;
  line-height: 12px;
  }