CSS Flex -如果内容更宽，可以切换到行的列？

文章/答案/技术大牛

发布

1回答

css、layout、flexbox

我正在尝试实现以下布局： <Column 1, 50%> <Column 2, 50%> 列2可能有更长的内容，这取决于某些条件，在这种情况下，它现在应该被推到第二行，并采用100%的宽度。<Row 1 (was Column 1), 100%> <Row 2 (was Column 2), 100%> 现在我被困在等宽的栏目中，随着更宽的内容，第二栏垂直增长。

浏览 23提问于2020-01-30得票数 1

1回答

按钮自动宽度每个内容，但按步骤对齐页网格

css、flexbox、css-grid

我想实现页面网格相关的宽度按钮，使他们有准自动宽度取决于内容，但与一定的宽度步骤，按钮宽度总是采取N个页面网格列数。当按钮内容变得太宽以至于无法在单个网格列中呈现按钮时，它将变成2列宽(如果需要的话甚至更宽).此图像显示了如何根据网格调整按钮大小的示例：第一行显示超过单列宽度(实际上超过两列)的第二个按钮，因此应该跨越页网格中的3<e

浏览 2提问于2018-06-20得票数 0

2回答

WPF DataGrid列宽自动和滚动条

wpf、xaml、user-interface、width

我有一个有很多列的DataGrid。我想Width="Auto"滚动条显示一切，如果窗口比所有列都窄。如果窗口更宽，我希望列跨越空白空间，这样就没有死区。基本上，我希望列的最小宽度完全适合内容或标题。如果窗口更宽，则扩展到更大。

浏览 1提问于2012-11-30得票数 17

回答已采纳

2回答

我怎样才能停止我的网站滚动水平，而不是让它包装到一个新的线？

html、css、scroll

谢谢你解决这个问题，这可能是一个重复，但我对此并不陌生，我想知道如何在我的站点上停止这个水平滚动，这里有一个链接到它作为一个代码依赖的和它在github 上，正如我已经提到的，我正在努力让水平滚动停止，我宁愿它包装到一个新的行上，而不是让它滚动到一个空白，这里是一个问题感谢导航条形码，因为这是引起问题的原因。

浏览 3提问于2022-04-24得票数 1

回答已采纳

5回答

是否有可能创建一个html表来流列或行并相应地将其包装在CSS中？

html、css、flexbox

我在想，如果没有Javascript，下面的内容是否可能出现。假设我有下一个表(它将项目包装到下一行，左转右)。01 02 03 0409 10 11 1202 06 1004 08 12 理想情况下，我希望能够以声明的方式指定元素的数量，比如我可以指定元素的</

浏览 0提问于2016-08-31得票数 0

回答已采纳

1回答

悬停增加宽度的CSS两列布局

html、css

我想有两列(都是流体)的行，当我在其中一个列中悬停一个元素时，它将通过水平幻灯片显示内容，这将使列更宽，因此另一个不那么宽。这在纯CSS中是可能的吗？[ Left column fluid (elementX)][Right column fluid][ Left column fluid (下面是一个可以更好地说明这一点的

浏览 4提问于2014-06-13得票数 0

3回答

CSS网格-不需要媒体查询的最大列数

html、css、flexbox、css-grid

是否可以定义具有最大列数的网格，但允许元素在屏幕宽度更改时换到新行上？CSS： display: flex;}.grid {}

浏览 0提问于2019-03-21得票数 16

回答已采纳

1回答

引导4网格在列方向不遵守col*

css、bootstrap-4

在宽(景观)显示上，我想显示2行3列。[1] [2] [3]但是在狭窄的(肖像)显示上，我想显示3行2列，我希望卡片能够保持列下的顺序，如下所示：[2] [5]我遇到的问题是，当网格位于列的方向时div上，我默认为flex列，以获得窄宽度的柱状方向。我切换到中等大小的

浏览 1提问于2018-11-26得票数 1

回答已采纳

2回答

固定的div比移动屏幕更宽。为什么？

html、css

在这个简化的HTML中，我有一个固定的div，它意味着窗口的精确宽度。但是在div上面的内容中也有一个很长的单词，它扰乱了布局。 div { left: 0; display: flex"viewport“比窗口更宽，因此div (固定在viewport上)最终会比窗口更宽。在

浏览 1提问于2018-07-10得票数 1

3回答

将自动宽度、固定宽度和百分比宽度合并到同一HTML表行中

html、css、html-table、fluid-layout

我想要创建一个有4列的表。表中的2列是标签，应该自动调整到最宽的元素。其他列之一为固定宽度，最后一列应填充剩余空间。Expandable Content 2</td></tr> <

浏览 1提问于2016-07-20得票数 1

回答已采纳

1回答

将不同高度的盒子均匀地分布在柔性箱柱上。

javascript、css、reactjs、flexbox

我有一些相同宽度的盒子，但高度不同(取决于它们的内容--它们是title+text的注释)和一个自动高度容器(愿意滚动)。这样做的目的是在跨列的容器中分发便笺，这样看起来就像Google。目前，我使用的是柔性盒行，但我正在释放空间：我当前的CSS如下所示： display: flex; flex-wrap: wrap;

浏览 6提问于2016-04-01得票数 4

回答已采纳

1回答

如何创建网格与方块，尊重最大宽度和高度仅使用CSS？

html、css、flexbox

我用的是React，Sass en EC6。不过，我面临的问题是：我希望中间的方块永远是正方形，同时显示内容尽可能大(没有固定的</

浏览 0提问于2019-06-05得票数 1

1回答

如何在柔性盒中“合并”项，使它们不会溢出？

css、flexbox

我试着让我的个人网站有反应。在登陆页面(桌面视图中)，有三个链接安排在一个灵活的框行。每个链接本身也是一个柔性盒，项目安排在一栏中：这方面的CSS如下：.homemain-links { flex-direction;} 当屏幕大小从桌面转移到移动时，我希望链接从一行切换到<em

浏览 3提问于2022-08-29得票数 0

2回答

根据内容的大小调整flexbox div的大小

html、css、flexbox

我有一个看起来像这样的flexbox，我正在尝试删除内容末尾的所有额外空间。 ? 我希望它的大小如下所示，宽度大小是为了适应里面的内容，而不是比它需要的更宽。 ? 我还希望它具有这样的属性，即宽度将根据需要增长，以便适合其中的内容，然后在需要时换行到下一行。 ? 当然，我希望子元素的大小合理以适合其内容(即标签、选择等足够宽以显示其内

浏览 28提问于2020-05-01得票数 2

回答已采纳

1回答

引导:在某些特定情况下使用断点，例如

twitter-bootstrap、bootstrap-4

虽然有效地使用了断点，但不知怎么还是找不出这些断点的具体情况 1) col-md-auto的工作方式将如何与col-auto不同？可以看到的例子

浏览 1提问于2018-10-31得票数 0

回答已采纳

2回答

在Reactjs映射之后，如何在彼此之间显示cols？

reactjs、twitter-bootstrap、react-bootstrap

我有这样的代码，它从数组中映射和显示我的网站的帖子。 </Row> )} </>我的目标是在PC显示器上自动显示一行中的两条帖子(我猜是一行中的

浏览 1提问于2021-12-18得票数 0

回答已采纳

1回答

使用display: flex使div的宽度等于内容的宽度。内联-flex不工作

css、flexbox

我正在尝试确保使用display: flex的div的宽度与其内容的宽度相等。下面是一个示例： #eventDetailElements { flex-wrap: wrap; justify-content我试着把我的CSS改成display: inline-flex，但得到的结果是： ? 它仍然比<em

浏览 125提问于2020-09-19得票数 0

回答已采纳

1回答

使用省略号直到最小宽度，然后换到下一行。

html、css、flexbox

我想创建一个由三列组成的行，其中左列总是在左边，右边的两列是连接在一起的(如果没有足够的空间，就把它们合在一起到下一行)。使用flex很容易实现这一点，可能如下所示：这里的问题是，我还希望中间列(紫罗兰色always-right/left)收缩到一些使用text-overflow: ellipsis的min-width这意

浏览 0提问于2016-11-19得票数 4

回答已采纳

1回答

柔性箱可以通过扩展前一个页脚部分来“粘着”最后一个页脚部分吗？

html、css、flexbox、sticky-footer

考虑到下面基本的HTML结构(我无法更改)，我知道我可以用这个CSS扩展主内容div：html, height: 100%; display: flex;flex-direction: column; flex: 1 0 auto; flex-shrink: 0;<body>container"> <&#

浏览 0提问于2018-11-04得票数 0

回答已采纳

2回答

在柔性箱中可以使用相对定位吗？

javascript、html、css、canvas、flexbox

我正在进行模块化的行/列布局，其中列中的行和行等都是可变的组合，我正在使用flex属性使这些元素很好地适合页面。CSS： display: flex;.column { flex-direction: column; flex: 1请注意，列</e

浏览 1提问于2018-05-16得票数 3

回答已采纳

点击加载更多