全宽弹性项目
[英] Full width flex items
本文介绍了全宽弹性项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试构建一个具有水平滚动功能的 div，其中每个项目的宽度取决于其内容.这是我的问题的演示:
在这里，我希望 flex 项目应该采用全宽，这取决于它不应该被包裹的内容.出于同样的原因，我提供了水平滚动，即使宽度超出页面内容应该以无换行方式可见.
下面是相同的html代码:
CSS:
.workflow_container {高度:200px；溢出-y:隐藏；溢出-x:自动；}
HTML 代码:
<div class="d-flex flex-nowrap workflow_container"><div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
<div class="d-flex flex-column bd-highlight mb-3"><div class="p-2 bd-highlight">Flex 项目 1</div><div class="p-2 bd-highlight">Flex 项目 2</div><div class="p-2 bd-highlight">Flex 项目 3</div>
解决方案
Flex 项目的初始设置是 flex-shrink: 1.这意味着弹性项目可以收缩以防止容器溢出.
只需禁用flex-shrink.
将此添加到您的代码中:
.mb-3 { flex-shrink: 0;}
https://jsfiddle.net/gvnqbju7/6/
I am trying to build a div with horizontal scrolling in which each item width is depend upon its content. Here is demo of my problem: jsFiddle
Here I want the flex items should take full width depend on its content it should not be wrapped. I have provided horizontal scrolling for the same reason even if the width is beyond the page content should be visible in no wrap fashion.
Below is html code for same:
css:
.workflow_container {
height: 200px;
overflow-y: hidden;
overflow-x: auto;
}
Html code :
<div class="container">
<div class="d-flex flex-nowrap workflow_container">
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column bd-highlight mb-3">
<div class="p-2 bd-highlight">Flex item 1</div>
<div class="p-2 bd-highlight">Flex item 2</div>
<div class="p-2 bd-highlight">Flex item 3</div>
</div>
</div>
</div>
解决方案
An initial setting on flex items is flex-shrink: 1. This means that flex items can shrink in order to prevent an overflow of the container.
Just disable flex-shrink.
Add this to your code:
.mb-3 { flex-shrink: 0; }
https://jsfiddle.net/gvnqbju7/6/
这篇关于全宽弹性项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
