我正在尝试学习flexbox,我真的很喜欢。我正在尝试使用动态宽度,当我使用divs进行播放时,它可以工作。如果我尝试使用li进行操作,则效果不佳。我的代码在codepen上。
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;
}
将属性放在tell上<div>
以显示<ul>
in flex,而不是in <li>
。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句