javascript - 关于flex布局的一些疑问：div布局下的为什么align-items:flex-start 为什么会没用？？

Question

<!--ul 列表布局： align-items:flex-start; 有效 -->

   <style>
     .list{max-width:100%;border:1px solid red;margin-top:10px;list-style-type:none;display:flex;display:-webit-flex;justify-content:center;flex-direction:row;-webkit-flex-direction:row;flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-flow:row wrap;align-items:center;}
     .list li{width:100px;background-color:black;opacity:0.6;margin:0px 10px;}
     .list>li:nth-of-type(1){height:50px;}
     .list>li:nth-of-type(2){height:100px;}
     .list>li:nth-of-type(3){height:150px;}
   </style>
   <ul class='list'>
     <li></li>
     <li></li>
     <li></li>
   </ul>
    
   <!---这个是用 align-items:flex-start 无效（好多都无效:justify-content:flex-start等）-->
   <style>
     .flex_test{display:flex;display:-webkit-flex;flex-flow:row wrap;-webkit-flex-flow:row wrap;justify-centent:flex-start;align-items:flex-start;border:1px solid green;margin-top:10px;}
     .flex_test p{width:100px;background-color:black;opacity:0.6;}
     .flex_test p:nth-of-type(1){height:100px;}
     .flex_test p:nth-of-type(2){height:150px;}
     .flex_test p:nth-of-type(3){height:200px;}
   </style>
   <p class='flex_test'>
     <p></p>
     <p></p>
     <p></p>
   </p>
   

为什么会出现这样的现象？？

Answer 1

不知道你要什么效果。代码中第二个justify-content写错了，写成了justify-centent。
推荐你看看大牛的博客
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool