如何解决更改项目的属性以调整宽度并将其他项目包装在flexbox行上
我正在构建包含多个图表的仪表板。默认情况下,每个图表将占用行宽度的1/3(该行上3个图表)。我想给用户一个选择,为每个图表选择图表宽度(1 / 3、1 / 2或100%宽度)。
使用flexbox可以做到吗?如果是这样,我需要在元素上更改哪个css / flexbox属性,以便更改图表宽度,并且该行上的下一个图表将相应地换行?
我最接近期望结果的是父级div上有flex
,而子级(图)上有flex: 1 0 33%;
。而且,我需要为用户提供一种更改33%
值的方法。不确定这是推荐/可靠的方法吗?!
解决方法
看看以下内容是否对您有用。
您可以根据需要简单地切换half
和full
类。
.row {
display: flex;
flex-flow: row wrap;
margin-bottom: 1rem;
}
.item {
width: 32%;
background: red;
border: 1px solid #000;
}
.item.half {
width: 50%;
}
.item.full {
width: 100%;
}
<div class="row">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row">
<div class="item half">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="row">
<div class="item full">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。