代码之家 › 专栏 › 技术社区 › darkhorse

合并工具类的宽度和弹性属性

flexbox css html

darkhorse · 技术社区 · 5 年前

在我的站点上,我有很多设置元素宽度的实用程序类。对于几乎所有的案例来说 width 财产是完美的。唯一的问题是flex box。对于flex项目 flex 需要使用属性。我试着将这两个元素组合成一个类,如下所示:

.width-100 {
    width: 100px !important;
    flex: 0 0 100px !important;
}

令人惊讶的是,这在我尝试过的几个地方都奏效了。当图元未使用flexbox时,其 宽度 设置正确。当某个图元使用flexbox时属性确保它也能正常工作。然而,我想知道这是不是一个好主意。可能有我现在根本没有预见到的错误吗?

1 回复 | 直到 5 年前

Temani Afif 5 年前

min-width 约束和设置 width 将使弹性项的行为不同:

.container {
  display:flex;
  margin:5px;
}
.container > img {
  flex: 0 0 100px;
}

.container > span {
  flex-grow:1;
  background:red;
}

<div class="container">
  <img src="https://i.picsum.photos/id/100/200/100.jpg">
  <span></span>
</div>

<div class="container">
  <img src="https://i.picsum.photos/id/100/200/100.jpg" style="width:100px">
  <span></span>
</div>

200px 100px . 所以,假设宽度在flexbox中不起作用是错误的,您需要 flex-basis .您的代码确实会强制宽度始终保持不变但这和 flex:0 0 100px

顺便说一下,您的代码可以简化为

.width-100 {
    width: 100px !important;
    flex-shrink: 0 !important;
}

这将产生相同的输出,因为 flex-grow 0 伸缩基准值 会考虑你设置的宽度。

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

3 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

3 年前

alan · 有没有办法向flexbox图像添加链接?

3 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

3 年前

n1234 · Flexbox-图像和内容

7 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

7 年前

Adam Olsson · 在中心CSS中对齐单个列表项

7 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

7 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

7 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

7 年前