我正在尝试学习 Flexbox,我真的很喜欢它。我正在尝试 το 玩动态宽度,当我这样做时div
它有效。如果我尝试这样做li
,它也不起作用。我的代码已上线codepen http://codepen.io/jrock2004/pen/pjvZJd.
div.example
ul
li
| 1
li
| 2
li
| 3
li
| 4
li
| 5
li
| 6
div.container
div.col
| 1
div.col
| 2
div.col
| 3
div.col
| 4
div.col
| 5
div.col
| 6
SASS代码
.container {
border: 1px solid #000;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 50%;
.col {
width: calc(100% / 3);
height: 120px;
text-align: center;
}
}
.example {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 50%;
border: 1px solid #000;
margin: 1em 0;
ul {
width: 100%;
padding-left: 0;
}
li {
list-style: none;
display: inline-block;
width: calc(100% / 3);
height: 120px;
text-align: center;
}
}
您需要将 flex 属性应用到<ul>
ul {
display: flex;
flex-direction: row; <-- not needed as this is the default behavior
flex-wrap: wrap;
}
将属性放在<div>
告诉它显示<ul>
在弯曲中,不<li>
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)