下面是代码和效果图,第二个和第三都没有对齐,都靠左了
先说修改的地方,再说问题为什么出现
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
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
3 回答1.4k 阅读✓ 已解决
2 回答2.5k 阅读✓ 已解决
2 回答1.9k 阅读✓ 已解决
3 回答1.1k 阅读✓ 已解决
1 回答2.9k 阅读✓ 已解决
ul 加上 justify-content: space-between;