flex布局，align-self对齐方式不对

Question

下面是代码和效果图，第二个和第三都没有对齐，都靠左了

Answer 1

ul 加上 justify-content: space-between;

Answer 2

先说修改的地方,再说问题为什么出现

ul{
  height: 300px;
  width:300px;
  border-radius:10px;
  border:#666 3px solid;
  background:#e5e5e5;
  padding:10px;
  margin:10px;
  display:flex;
  justify-content: space-between;
}
#one li:nth-child(2){
  align-self:center;
}
#one li:nth-child(3){
  align-self:flex-end;
}

align-self属性是用于覆盖Flex容器中align-items属性的,而align-items属性是这么一回事

为justify-content的补充属性,为flex item在非flex-direction指定的另一轴线的位置

问题出在你指定的align-self属性控制的是在垂直方向的位置,而主轴(水平)是由Flex容器中的justify-content属性控制的

相关资料(摘自我自己的博文):

align-items 为justify-content的补充属性,为flex item在非flex-direction指定的另一轴线的位置

• flex-start(default)

• flex-end

• center

justify-content 用于改变flex容器中flex item在轴线上的位置

• flex-start(default,从axies start开始紧靠排列)

• flex-end(axies end端紧靠排列)

• center(展现如其名,axies中间)

• space-between(相当于将空间等分,每份空间中flex-start排列)

• space-around(空间等分,每份空间中center排列)

align-self 用于覆盖Flex容器中的align-items属性,它有和align-items相同的属性值

• auto(继承align-items属性,无父元素则等同于stretch)

• stretch

• flex-start

• flex-end

• center

• baseline