在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属性会将水平图像尺寸更改为您定义的像素（在您的情况下为60px）。宽度= 60px
2. 最小宽度将确保水平图像宽度大于或等于您定义的像素。宽度> = 60像素。

您看到的输出是因为图像采用其原始尺寸。即一些值大于60px。

Answer 3

宽度：

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

最小宽度：

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

最大宽度：

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

请访问Info Source以获取更多信息。

已编辑

这也适用于高度

使其更简单，更通用

something = 10px;

该值不小于10px。

min-something = 10px;

最小值不能低于给定的属性值。 例如= 10像素，11像素，20像素，300像素高于最低级别，因此可以接受。因此图像的分辨率不能低于10像素。

max-something = 10px;

最大值不能超过或高于给定的属性值。 例如= 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将为您显示要显示的空间表单图像。