items-self:baseline
来源：4-11 选择题
慕盖茨9092533
2018-12-21 15:40:54
老师，在这道题中，基线对齐，具体是和谁对齐，第三个li具体在哪个位置。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。行内轴是什么哪个轴？这句话帮我解释一下？多谢
写回答
1回答
-
首先，我们需要了解盒子的基线，如图：
在弹性盒子中，伸缩项（这里指的是子元素盒子，即li）根据伸缩项的基线对齐（伸缩项的基线就是子元素盒子的底边对齐的基线，后面简称底边基线），实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; font-size: 24px; } ul { display: flex; height: 800px; align-items: center; background-color: purple; } li { width: 200px; margin:20px; } li:nth-child(1) { background-color: pink; align-self: baseline; height:100px; } li:nth-child(2) { background-color: green; align-self: baseline; height: 150px; } li:nth-child(3) { background-color: orange; align-self: baseline; height: 200px; } li:nth-child(4) { background-color: gray; align-self: baseline; height: 250px; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>运行效果：
当你的伸缩项（即子元素）带有文本内容的时候，则会根据文字基线对齐，由此得出文字基线 > 盒子底部基线，实例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; font-size: 24px; } ul { display: flex; height: 800px; align-items: center; background-color: purple; } li { width: 200px; margin:20px; } li:nth-child(1) { background-color: pink; align-self: baseline; height:100px; } li:nth-child(2) { background-color: green; align-self: baseline; height: 150px; } li:nth-child(3) { background-color: orange; align-self: baseline; height: 200px; line-height: 200px; } li:nth-child(4) { background-color: gray; align-self: baseline; height: 250px; } </style> </head> <body> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>jQuery</li> </ul> </body> </html>运行效果：
2、行内轴（inline-axis）指的是沿着行内轴来排列子元素（映射为 horizontal）
注：horizontal指的是水平方向，实例：
运行效果：
再来看主轴与侧轴的概念：
主轴就是弹性盒子子元素沿着排列的轴；与主轴垂直的轴称为侧轴。
如果有flex-direction值为row（默认值）,则主轴是水平方向，侧轴是垂直方向。
如果有 flex-direction值为column,则主轴是垂直方向，侧轴是水平方向。
那么，侧轴与行内轴为一条线，指的是当flex-direction值为column的时候，侧轴变成水平方向，行内轴也是水平方向的时候，侧轴与行内轴方向一致的时候，baseline与flex-start等效。
希望可以帮到你！
0
相似问题