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

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

clipboard.png

clipboard.png

阅读 14.6k
2 个回答

ul 加上 justify-content: space-between;

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题