在 flexbox 中使用 width 和 min-width 有什么区别？

Question

背景

我想通过background-image显示图标，但是如果文字太长会被文字遮挡。

.box {
  display : inline-flex;
}

.box:before {
  content : '';
  background-image: url('https://imgur.com/TCc5A1P');
  width: 60px;
  height: 60px;
  margin-right: 0.2em;
  display: inline-block;
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi 
</div>

---

问题

当我使用min-width 代替width 或使用inline-block 代替.box 时，它会起作用。谁能告诉我为什么min-width 或inline-block 有效？

使用min-width 代替width

.box {
  display : inline-flex;
}

.box:before {
  content : '';
  background-image: url('https://imgur.com/TCc5A1P');
  min-width: 60px;
  /* width: 60px; */
  height: 60px;
  margin-right: 0.2em;
  display: inline-block;
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi 
</div>

--

将inline-block 用于.box

.box {
  /* display : inline-flex; */
  display : inline-block;
}

.box:before {
  content : '';
  background-image: url('https://imgur.com/TCc5A1P');
  width: 60px;
  height: 60px;
  margin-right: 0.2em;
  display: inline-block;
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur.
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi 
</div>

Answer 1

当我使用min-width 代替width 或使用inline-block 代替.box 时，它会起作用。谁能告诉我为什么min-width 或inline-block 有效？

---

min-width

设置元素的最小宽度。

---

width

设置元素的宽度。

---

display: inline-flex（和flex）

弹性项目的初始设置是flex-shrink: 1。这意味着弹性项目可以缩小到它们定义的width / height 以下，以防止它们溢出容器。为了防止这种行为，您需要禁用flex-shrink。

例如：

.box::before {
  width: 60px;
  flex-shrink: 0; <------ add this to your code
  content : '';
     ...
     ...
     ...
}

或者，对于更简洁的版本（也是 recommended by the flexbox spec），使用这个：

.box::before {
  flex: 0 0 60px; /* flex-grow, flex-shrink, flex-basis */
  content : '';
     ...
     ...
     ...
}

请注意，flex-shrink 适用于 width 和 height，但不适用于 min-width 和 min-height。通过在元素上禁用flex-shrink，您实际上是在确定其最小长度。

例如：

width: 60px;
flex-shrink: 0;

相当于：

min-width: 60px;

有关更完整的解释，请参阅我的回答中的 “flex-shrink 因素” 部分：

• What are the differences between flex-basis and width?

---

display: inline-block（和block）

flex-shrink（如上所述）不适用于块格式化内容。

---

修改代码

.box {
  display: inline-flex;
}

.box::before {
  flex: 0 0 60px;
  height: 60px;
  background-image: url('http://i.imgur.com/60PVLis.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.2em;
  content: '';
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum
  commodi totam sit, natus dolore reiciendis. Nihil possimus, magni 
  praesentium molestias ab vel dolorum rem. Eos autem saepe magnam 
  pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Quasi
</div>

Answer 2

1. Width 属性会将图像的水平尺寸更改为您定义的像素（在您的情况下为 60 像素）。宽度 = 60 像素
2. Min-Width 将确保水平图像宽度大于或等于您定义的像素。宽度 >= 60 像素。

您在案例中看到的输出是因为图像采用其原始尺寸。即大于 60px 的某个值。

Answer 3

宽度：

width CSS 属性指定元素内容区域的宽度。内容区域位于元素的内边距、边框和边距内。

最小宽度：

最小宽度 CSS 属性用于设置给定元素的最小宽度。它可以防止 width 属性的使用值变得小于为 min-width 指定的值。

最大宽度：

max-width CSS 属性用于设置给定元素的最大宽度。它可以防止 width 属性的使用值变得大于为 max-width 指定的值。

请访问Info Source了解更多信息。

已编辑

这也适用于高度，

让它更简单更通用

something = 10px;

该值既不小于也不大于 10px。

min-something = 10px;

最小值不能低于给定的属性值。 例如= 10px、11px、20px、300px 高于最低水平，因此被接受。所以图片的分辨率不能低于10px。

max-something = 10px;

最大值不能超过或高于给定的属性值。 E.g.= 9px, 8px, 5px, 0px 低于最高水平，因此被接受。所以图像的分辨率不能高于 10px。

以下是几个例子

最小宽度和高度为 100px

.box {
  /*display : inline-flex;*/
  display: inline-block;
}

.box:before {
  content: '';
  background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
  min-width: 100px;
  min-height: 100px;
  margin-right: 0.2em;
  display: inline-block;
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Quasi

  <br> please note that image is 100px *100px
</div>

最小宽度和高度为 60px

.box {
  /*display : inline-flex;*/
  display: inline-block;
}

.box:before {
  content: '';
  background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
  min-width: 60px;
  min-height: 60px;
  margin-right: 0.2em;
  display: inline-block;
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Quasi
  <br> please note that image is 100px * 100px
</div>

宽高均为60px

.box {
  /*display : inline-flex;*/
  display: inline-block;
}

.box:before {
  content: '';
  background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
  width: 60px;
  height: 60px;
  margin-right: 0.2em;
  display: inline-block;
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Quasi
  <br> please note that image is 100px * 100px
</div>

宽高均为 100px

.box {
  /*display : inline-flex;*/
  display: inline-block;
}

.box:before {
  content: '';
  background-image: url('https://smartlogic.io/images/brand-assets/smartlogic-seal-teal-100.png');
  width: 100px;
  height: 100px;
  margin-right: 0.2em;
  display: inline-block;
}

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure harum commodi totam sit, natus dolore reiciendis. Nihil possimus, magni praesentium molestias ab vel dolorum rem. Eos autem saepe magnam pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing
  elit. Quasi
  <br> please note that image is 100px * 100px
</div>

还要注意

在你的情况下， 当您使用最大宽度时，您还需要定义最小宽度。 min-width 将为您提供要显示的空间形式图像。