在 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>

--

对 .box

使用 inline-block

.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

宽度:

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

最小宽度：

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

最大宽度：

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

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

已编辑

这也适用于身高，

让它更简单更通用

something = 10px;

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

min-something = 10px;

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

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 将为您提供要显示的 space 表单图像。

Answer 2

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

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

Answer 3

When I use min-width instead of width or use inline-block for .box, it will work. Can anyone tell me why min-width or inline-block works?

`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;

有关更完整的解释，请参阅我的回答中的 "The flex-shrink factor" 部分：

`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>

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

What's the difference between using width and min-width in flexbox?

html

css

background-image

flexbox

`min-width`

`width`

`display: inline-flex`（和`flex`）

`display: inline-block`（和`block`）

修改后的代码

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

What's the difference between using width and min-width in flexbox?

html

css

background-image

flexbox

min-width

width

display: inline-flex（和flex）

display: inline-block（和block）

修改后的代码

`min-width`

`width`

`display: inline-flex`（和`flex`）

`display: inline-block`（和`block`）