我可以使用CSS Flexbox删除列吗？

Question

当可用的空间很小时，CSS flexbox会以某种方式删除列（弹性项目） - 类似于FooTable提供的功能吗？

Answer 1

如果需要，该元素将收紧0px。隐藏内容可以使用overflow: hidden，来处理，但要注意这可能会在其他情况下产生问题。
请检查以下代码段以查看结果：

＆＃13;

＆＃13;

.container {
    display: flex;
}

.child1, .child3 {
    flex: 1 0 50%;
}

.child2 {
    flex: 1;
    overflow: hidden;
}

＆＃13;

<div class="container">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
</div>

＆＃13;

＆＃13;

＆＃13;

其他建议：

• 根据窗口大小使用媒体查询隐藏内容;
• 根据窗口大小使用媒体查询应用overflow属性;
• 如果您不想隐藏它，请使用flex-wrap将您的Flex项目分散到2行以上