英文:
Reorder flexbox with pure css
问题
我想将不同的顺序编码到flex-items样式的css变量中，然后使用:checked伪类来切换编码顺序。
但是，我不知道如何解决作用域问题。有人可以帮我解决这个问题吗？
.expandable {
order: var(--oldest);
background-color: lightblue;
}
#expand-toggle:checked ~ * .expandable {
order: var(--newest);
background-color: darkseagreen;
}
<input type="checkbox" id="expand-toggle" />
<div style="display: flex; flex-direction: column">
<div class="expandable" style="--newest: 1; --oldest: 4; order: var(--oldest);">A</div>
<div class="expandable" style="--newest: 2; --oldest: 3; order: var(--oldest);">B</div>
<div class="expandable" style="--newest: 3; --oldest: 2; order: var(--oldest);">C</div>
<div class="expandable" style="--newest: 4; --oldest: 1; order: var(--oldest);">D</div>
</div>
我想象中可以使用order: calc(b*var(--oldest) + (1-b)*var(--newest))来实现，但这似乎是一种不正规的方法。
英文:
I'd like to encode different orders into css variables in the flex-items style, and then switch the encoded order using the :checked psudo-class.
However, I don't know how to get around the scoping problems. Can someone fix this for me.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.expandable {
order: var(--oldest);
background-color:lightblue;
}
#expand-toggle:checked ~ * .expandable {
order: var(--newest);
background-color:darkseagreen;
}
<!-- language: lang-html -->
<input type="checkbox" id="expand-toggle" />
<div style="display: flex; flex-direction: column">
<div class="expandable" style="--newest: 1; --oldest: 4; order: var(--oldest);" >A</div>
<div class="expandable" style="--newest: 2; --oldest: 3; order: var(--oldest);" >B</div>
<div class="expandable" style="--newest: 3; --oldest: 2; order: var(--oldest);" >C</div>
<div class="expandable" style="--newest: 4; --oldest: 1; order: var(--oldest);" >D</div>
</div>
<!-- end snippet -->
I imagine its possible to do order: calc(b*var(--oldest) + (1-b)*var(--newest)) but this seems like a hack.
答案1
得分: 0
.expandable {
order: var(--oldest);
background-color: lightblue;
}
#expand-toggle:checked ~ * .expandable {
order: var(--newest);
background-color: darkseagreen;
}
<input type="checkbox" id="expand-toggle" />
<div style="display: flex; flex-direction: column">
<div class="expandable" style="--newest: 1; --oldest: 4;">A</div>
<div class="expandable" style="--newest: 2; --oldest: 3;">B</div>
<div class="expandable" style="--newest: 3; --oldest: 2;">C</div>
<div class="expandable" style="--newest: 4; --oldest: 1;">D</div>
</div>
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.expandable {
order: var(--oldest);
background-color:lightblue;
}
#expand-toggle:checked ~ * .expandable {
order: var(--newest);
background-color:darkseagreen;
}
<!-- language: lang-html -->
<input type="checkbox" id="expand-toggle" />
<div style="display: flex; flex-direction: column">
<div class="expandable" style="--newest: 1; --oldest: 4;" >A</div>
<div class="expandable" style="--newest: 2; --oldest: 3;" >B</div>
<div class="expandable" style="--newest: 3; --oldest: 2;" >C</div>
<div class="expandable" style="--newest: 4; --oldest: 1;" >D</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论