为什么在这个flex布局中，align-items的设置不起作用？
我想实现一个左边和右边宽度均为200px，中间栏宽度自适应，长度占满屏幕空间的布局，于是使用flexbox，代码如下：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>233</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
.wrap {
display:flex;
display:-webkit-flex;
flex-direction:row;
align-items:stretch;
}
.left {
width:200px;
flex-grow:0;
background-color: gray;
}
.center {
flex-grow:1;
background-color: black;
}
.right {
width:200px;
flex-grow:0;
background-color: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>结果发现页面上什么都没有，审查元素，三栏高度均为0，也就是说我把align-items设置为stretch无效，请问这是为什么呢？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
html , body ,.wrap{height:100%;} 问题出在，你这里容器高度为0 。
你的flex-direction设为cloumn才可以用align-items属性