- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有 4 个 flexbox 列,一切正常,但是当我向列中添加一些文本并将其设置为大字体时,由于 flex 属性,列变得比应有的更宽。
我尝试使用 word-break: break-word
并且它有所帮助,但是当我将列的大小调整为非常小的宽度时,文本中的字母被分成多行(一个字母每行),但该列的宽度不会小于一个字母大小。
看这个video(一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列。我只想始终尊重 flex 设置; flex 尺寸 1 : 3 : 4 : 4)
我知道,将 font-size 和 column padding 设置得更小会有所帮助...但是还有其他解决方案吗?
我不能使用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
可见
时适用.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/51292600/
我有一些文档,它的创建时间以毫秒为单位。我需要将它们分为今天、昨天、过去 7 天、过去 30 天、超过 30 天。 我使用了以下代码:convertSimpleDayFormat(1347022979
我正在尝试创建一个 Crystal 报告,用于在图表中显示十二个月的月费率。 对于此任务,我有一个 dc_date(mm/dd/yyyy) 作为变量,我将其更改为 mmyyyy 格式。但是当我看到月份
我想使用 Linux 命令将年转换为天(过去)。例如: 用户给出的号码:10年前 程序应计算 10 年前的天数总和(例如:10*12*31(年/月/日)--> 3720 天)。 程序将其与今年开始的当
我的要求有点复杂,为了便于理解,让我用简单的例子说明一下。假设,我们必须计算过去 12 个月消费者按月购买的产品数量。所以我们要做的是: SELECT DATENAME(MONTH, m.Invoic
如果我今天(2012 年 8 月 21 日)运行查询,我想得到这个结果集: [...] 为了得到这个,我正在使用以下内容,但它似乎过于复杂。这可以简化吗? ;WITH Numbers_cte([num
这是我目前用来显示下周五日期的方法。 $date_friday = date('F j', strtotime('Friday')); print $date_friday; 我应该使用什么来显示过去
我有一个包含一个日期时间列的表。我只需要返回过去 6 个月的行。这可以通过 来完成 where datetime_column > DATEADD(m, -6, current_timestamp)
我正在为我的应用使用 Firestore,并且希望能够获得过去 7 天内发布的最受欢迎的项目。在理想的情况下,调用看起来像这样: let calendar = Calendar.cur
我有以下方法来计算时间: public static String sumTime(String date1, String date2) throws ParseException { Ca
我想检索过去 24 小时内发布的观看次数最多的前 10 个主题。如果网站在过去 24 小时内获得的主题少于 10 个,则必须检索前一天剩余的浏览次数最多的主题。 我以unix格式将时间存储在数据库中,
我想从我的 MySQL 服务器获取过去 x 个月的所有记录。例如使用 2 个月(不是过去 2 个月,比如过去 60 天,而是过去整个月等等。如果实际月份是 4 月,我想要 2 月和 3 月的所有记录)
我正在尝试使用 php 创建一个博客系统,我需要一种方法来计算过去 21 天内浏览次数最多的帖子。有人知道这样做的好方法吗? 我对 php 没有太多经验,所以我需要有人给我指出正确的方向。我试图研究
我正在尝试查找过去 26 周每周结束时的用户总数。 例如, 从第 26 周开始,该周有 100 名用户注册,并且有 20 名新用户注册,因此到第 26 周结束时,注册用户数量为 120 名 从第 25
假设我们有下表,列如下所示: Rides ride_id start_time end_time passenger_id driver_id ride
好的,我正在尝试获取过去 24 小时内包含“价格”列的所有行的平均值。 $tickerBuy = $this->model->ticker("date AS datetime, avg(price)
我有一个账户表,其中名为“dateCreation”的列是账户的创建日期。 我想获取过去 12 个月内创建的所有帐户,但有时 2 个月或更长时间都没有创建帐户。在这几个月里,我希望 mysql 返回
是否有办法检索过去 7 天内添加的所有用户?添加用户时,包含时间戳。日期被添加到他们的“信息”中。 例如这样: 因此日期公式为:D/M/YYYY。谁能帮我理解如何做到这一点? PS:奇怪的OL3gee
我有一个 Angualr 服务,可以列出从当前月份开始的 12 个月和年份: JS: app.factory('12months', function() { return {
我有一个弹出窗口,其中一个名为 fade 的元素应该扩展到屏幕的整个宽度(当没有可滚动内容时它会这样做)。但是,当内容超过浏览器窗口的 100% 时,它不会扩展到页面高度的 100%。 如果我设置 h
我正在尝试选择过去 5 天的整数字段的总和,我需要将它分组为每一天。 我在确定分组时遇到了一些问题。到目前为止,这是我的 sql 查询: select sum(`amount_sale`) a
我是一名优秀的程序员,十分优秀!