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

2016/12 18 11:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于bwin娱乐官网平台下载的点点滴滴

<!–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 div{width:100px;background-color:black;opacity:0.6;}
     .flex_test div:nth-of-type(1){height:100px;}
     .flex_test div:nth-of-type(2){height:150px;}
     .flex_test div:nth-of-type(3){height:200px;}
   </style>
   <div class='flex_test'>
     <div></div>
     <div></div>
     <div></div>
   </div>
   

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

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

(看完/读完)这篇文章有何感想! 来看看bwin娱乐官网平台下载是怎么评论的吧!

--转载请注明: bwin娱乐官网_bwin娱乐官网平台_bwin娱乐官网平台下载 » 关于flex布局的一些疑问:div布局下的为什么align-items:flex-start 为什么会没用??

发表评论

(必填)