- mongodb - 在 MongoDB mapreduce 中,如何展平值对象?
- javascript - 对象传播与 Object.assign
- html - 输入类型 ="submit"Vs 按钮标签它们可以互换吗?
- sql - 使用 MongoDB 而不是 MS SQL Server 的优缺点
我有 4 个 flexbox 列,一切正常,但是当我向列中添加一些文本并将其设置为大字体时,由于 flex 属性,它使列比应有的宽。
我尝试使用 word-break: break-word
并且它有所帮助,但是当我将列调整为非常小的宽度时,文本中的字母被分成多行(一个字母每行),但列的宽度不会小于一个字母大小。
观看 video(一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列。我只想始终尊重 flex 设置;flex 大小为 1 : 3 : 4 : 4)
我知道,将字体大小和列填充设置为更小会有所帮助...但是还有其他解决方案吗?
我不能使用 overflow-x: hidden
。
.container {
display: flex;
width: 100%
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
最佳答案
您遇到了 flexbox 默认设置。
flex 项不能小于其内容沿主轴的大小。
默认是...
最小宽度:自动
最小高度:自动
...分别用于行方向和列方向的 flex 元素。
您可以通过将 flex 元素设置为:
最小宽度:0
最小高度:0
overflow: hidden
(或任何其他值,visible
除外)4.5. Automatic Minimum Size of Flex Items
To provide a more reasonable default minimum size for flex items, this specification introduces a new
auto
value as the initial value of themin-width
andmin-height
properties defined in CSS 2.1.
关于auto
值...
On a flex item whose
overflow
isvisible
in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to0
.
换句话说:
min-width: auto
和 min-height: auto
默认值仅在 overflow
为 visible
时适用.overflow
值不是 visible
,则 min-size 属性的值为 0
。overflow: hidden
可以替代 min-width: 0
和 min-height: 0
。还有……
min-height: auto
。嵌套 Flex 容器
如果您在 HTML 结构的多个级别上处理 flex 元素,可能需要覆盖默认的 min-width: auto
/min-height: auto
在更高级别的元素上。
基本上,具有 min-width: auto
的更高级别的 flex 元素可以防止嵌套在 min-width: 0
下的元素收缩。
例子:
Chrome 与 Firefox/Edge
至少从 2017 年开始,Chrome 似乎要么 (1) 恢复到 min-width: 0
/min-height: 0
默认值,要么 ( 2) 在某些情况下基于神秘算法自动应用 0
默认值。 (这可能是他们所说的 intervention 。)因此,许多人看到他们的布局(尤其是所需的滚动条)在 Chrome 中按预期工作,但在 Firefox/Edge 中却没有。此处更详细地介绍了此问题:flex-shrink discrepancy between Firefox and Chrome
IE11
如规范中所述,min-width
和 min-height
属性的 auto
值为"new"。这意味着某些浏览器可能仍会默认呈现 0
值,因为它们在值更新之前实现了 flex 布局,并且因为 0
是 min 的初始值-width
和 min-height
在 CSS 2.1 。 One such browser is IE11. 其他浏览器已更新为 flexbox spec 中定义的较新的 auto
值。
.container {
display: flex;
}
.col {
min-height: 200px;
padding: 30px;
word-break: break-word
}
.col1 {
flex: 1;
background: orange;
font-size: 80px;
min-width: 0; /* NEW */
}
.col2 {
flex: 3;
background: yellow
}
.col3 {
flex: 4;
background: skyblue
}
.col4 {
flex: 4;
background: red
}
<div class="container">
<div class="col col1">Lorem ipsum dolor</div>
<div class="col col2">Lorem ipsum dolor</div>
<div class="col col3">Lorem ipsum dolor</div>
<div class="col col4">Lorem ipsum dolor</div>
</div>
关于html - 为什么 flex 元素不缩小超过内容大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36247140/
更新 对于那些不喜欢内联 CSS 并想要类的人,这里有另一个带有类和样式表的 jsFiddle。 更新结束 我想做一个产品页面。它将包含三列。第一个是图片,第二个是一些规范,第三个是“入篮”。所有列的
我创建了一个简单的测试应用程序 使用以下代码 var i : int; for (i=0; i *
我做了一个小demo http://html5.by/blogdemo/flexbox/flex-grow-shrink-basis-stackoverflow.html flex 容器中有2个 fl
我读过好几遍,要让 flex-grow 按预期工作,您通常需要设置 flex-grow:1(或 flex: 1) 在元素的父级、其父级等上,一直向上。 在学习 flexbox 时,这给我的印象是它具有
我开始学习 FLEX。我只有 flex sdk。所以我只能使用它开始学习吗?如果是这样,请建议我要通过的链接.. 但是,使用编辑器将最大限度地减少我们的工作,并自行创建代码。所以作为一个新的学习者,理
有没有办法使用 flex-direction: column 在 flex 容器中放置 flex 项有相同的高度,只使用 CSS? JSFiddle:https://jsf
我有一个 flex .swf 和一个单独的 AIR 项目,我试图通过套接字相互通信。 这两个程序连接正常,.swf 能够毫无问题地将数据发送到 AIR 应用程序。但是,我发现当 AIR 应用程序将数据
在这种情况下,我希望将 2.5 放置在 2 下方 - 但 flexbox 容器强制将其放置在同一行,而不是将其放置在 div 下方那已经是那个特定的顺序了。 我如何使用 flexbox - 将包含 2
假设您有一个带有显示 flex、flex-direction 列的 div,在本例中高度为 600。 它有三个子项,每个子项的属性 flex 等于 1。前两个子项呈现一些简单文本,第三个子项呈现 h1
男孩,这个头衔是满口的。让我解释一下我的困惑: 我有一个 flex 容器和 2 个 flex 元素。 /* CSS */ .container {
这个问题在这里已经有了答案: CSS3 Flexbox: display: box vs. flexbox vs. flex (3 个答案) 关闭 1 年前。 今天我们中的许多人都知道 displa
其用例是带有单选按钮的响应式表单。当在大 PC 屏幕上时,所有单选按钮通常都在屏幕上的一行中(就像带有 flex-direction: row 的非包装 flex 容器中的 flex 元素)。在电话上
在可访问的 flex 应用程序中,用户可以使用 TAB 键在控件中导航。 在用户激活特定链接后,flex 应用程序会在 html 页面顶部弹出,并使用 swfobject.embedSWF 加载。 它
我将我的 Flex 3 项目导入 Flex 4 并删除了 Flex 4 问题窗口中列出的所有错误和警告。 启动我的应用程序时,我在 Flex 4 中遇到以下错误。 这可能是什么原因? Error: C
我有如下标记: alot of text 我不能让黄色占据红色的 100% 高度,即使红色溢出,它也只占据窗口的 100%。如果我将红色的 display
我在 Eclispe 3.4 中安装了 flex builder 3 插件。现在许可证过期了。所以我需要在其中添加另一个许可证。但我无法更改许可证 key ,因为该选项已禁用。 因此,请任何人知道如何
这个问题在这里已经有了答案: Make flex items have equal width in a row (3 个答案) How to make Flexbox items the same
我正在尝试理解以下行。 flex :0 1 50% 现在,如果最后一个值,flex basis 是像素,上面会说该元素不允许增长,但允许缩小并且最大为 50 像素。 但是用百分比代替,有什么关系。它将
我一直致力于 flex 布局,遇到了针对 Firefox 和 IE11 的问题。 我创建了一个 codepen显示问题。 截图 Chrome(左)、Firefox(右) 描述 预期的行为是header
我正在尝试在 flex (flash builder 4) 中创建一个简单的表单。我在里面放了一个表单容器和 FormItems。例如,表单项是标准的“客户”字段,例如名字、姓氏、地址、城市、州、 z
我是一名优秀的程序员,十分优秀!