炫意html5
最早CSS3和HTML5移动技术网站之一

flexbox中align-items的异常行为解释

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}
#right {
flex: 1;
overflow: auto;
}
p {
margin: 0
}
</style>
</head>
<body>
<div id="main">
<div>A</div>
<div id="right">
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
<p>asadadadasd</p>
</div>
</div>
</body>
</html>

上面可以正常生成左侧固定,右侧滚动的局部

但当我加入

#main {
align-items: center / flex-start / flex-end;
}

右侧滚动区域就会消失而且会溢出

想问下造成这种现象的原因是什么,谢谢!

回答

这种时候你要学会学习的方法。

  1. 首先到 MDN 上查找 align-items 的默认属性是什么:https://developer.mozilla.org…
  2. 得知是 normal,在你的场景下等效于 stretch
  3. 了解 stretch 的意思是按照容器的宽高缩放,所以滚动是正常
  4. 再看 center/flex-start/flex-end 的意思,只规定了起止位置,没有限制尺寸,所以撑开也是正常的
  5. 容器默认都是 overflow: visible,所以伸出去也是正常的。

炫意HTML5 » flexbox中align-items的异常行为解释

CSS3教程HTML5教程