我有四个列表项,我想让其中三个保持相同的大小,另一个的宽度为300像素。
我的HTML代码:
我的SASS:
我想让第一个li的宽度为300像素,然后其他三个li的大小相同。
<ul class="test">
<li class="desc">Test description</li>
<li class="test">Test</li>
<li class="test">Test</li>
<li class="test">Test</li>
</ul>
我的SASS:
ul.test {
flex: 1 0 auto;
flex-direction: row;
display: flex;
}
li.desc{
width: 300px;
}
li.test{
background: green;
flex: 1 0 auto
}
我想让第一个li的宽度为300像素,然后其他三个li的大小相同。
flex: 0 0 calc(33% - 100px);
这会将每个项目设置为容器中的1/3空间,减去固定同级元素的1/3。 - Michael Benjamin