В чем разница между использованием ширины и минимальной ширины во flexbox? - PullRequest
Новая
       17

В чем разница между использованием ширины и минимальной ширины во flexbox?

0 голосов
/ 24 января 2019

Фон

Я хочу отобразить значок через 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>

enter image description here

Вопрос

КогдаЯ использую min-width вместо width или inline-block для .box, это будет работать.Может кто-нибудь сказать мне, почему min-width или inline-block работает?

enter image description here

использовать 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>

Ответы [ 3 ]

0 голосов
/ 24 января 2019
  1. Свойство Width изменит размеры изображения по горизонтали на пиксели, которые вы определили (в вашем случае 60px). Ширина = 60px
  2. Min-Width обеспечит, чтобы ширина изображения по горизонтали была больше или равна пикселю, который вы определили. Ширина> = 60px.

Результат, который вы видите в вашем случае, связан с тем, что изображение принимает свои исходные размеры. то есть какое-то значение больше чем 60px.

0 голосов
/ 24 января 2019

Когда я использую min-width вместо width или inline-block для .box, это будет работать.Может кто-нибудь сказать мне, почему min-width или inline-block работает?

min-width

Устанавливает минимальную ширину элемента.

width

Устанавливает ширину элемента.

display: inline-flex (и flex)

Начальная настройка для элементов Flex - flex-shrink: 1.Это означает, что гибкие элементы могут сжиматься ниже их определенного width / height, чтобы предотвратить их переполнение контейнера.Чтобы предотвратить такое поведение, необходимо отключить flex-shrink.

Например: 

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

Или для более чистой версии (которая также рекомендуется спецификацией flexbox ), используйте это: 

.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» раздел в моем ответе здесь:

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>
0 голосов
/ 24 января 2019

width:

Свойство width определяет ширину области содержимого элемента.Область содержимого находится внутри отступа, границы и поля элемента.

min-width:

Свойство min-width CSS используется для установки минимумаширина данного элемента.Он не позволяет используемому значению свойства width становиться меньше значения, указанного для min-width.

max-width:

Свойство CSS max-width равноиспользуется для установки максимальной ширины данного элемента.Он не позволяет используемому значению свойства width становиться больше значения, указанного для max-width.

Для получения дополнительной информации посетите Источник информации .

Отредактировано

это также относится к высоте,

, чтобы сделать ее более простой и более общей

something = 10px;

значение не является ни меньше, нибольше 10px.

min-something = 10px;

минимальное значение не может быть ниже заданного значения свойства.Например, 10px, 11px, 20px, 300px выше минимального уровня, поэтому оно принимается.Таким образом, изображение не может быть меньше 10 пикселей в разрешении.

max-something = 10px;

максимальное значение не может превышать или превышать заданное значение свойства.Например, 9px, 8px, 5px, 0px ниже максимального уровня, поэтому это допустимо.Таким образом, разрешение изображения не должно превышать 10 пикселей.

Ниже приведено несколько примеров

min ширина и высота 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-ширина также.min-width даст вам пространство формы для показа.

...