为什么在这个flex布局中，align-items的设置不起作用？

ts2015

发布于
2016-03-18

我想实现一个左边和右边宽度均为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无效，请问这是为什么呢？

css 前端 flex flexbox

阅读 24.8k

2 个回答

得票最新