Margin в % внутри flex-элемента

160
17 ноября 2018, 11:40

Почему, когда элементу, который находится внутри flex-элемента, ставишь margin в % сам flex-элемент не расширяется, а если ставить margin в px, то flex-элемент расширяется.

Answer 1

Процентное значение вычисляется относительно ширины родительского элемента.

Рассмотрим на примере inline-flex:

Первоначально контейнер .div--0 имеет Ширину определенную контентом. Потом от этой Ширины вычисляется margin который и добавляется .div--1, при этом ширина родителя не измена, т.к. есть привязка к ней.

В случаи .div--2 пиксельное значение не привязано к родителю, что позволяет расширять родительский контейнер.

.wapper { 
  display: inline-flex; 
  border: 1px solid red; 
  padding: 10px; 
  margin-top:10px; 
} 
 
.div--1 { 
  margin-left: 50%; 
} 
 
.div--2 { 
  margin-left: 50px; 
}
<div class='wapper'> 
  <div class='div--0'> 
    1234 5678 90 
  </div> 
</div> 
<br/> 
<div class='wapper'> 
  <div class='div--1'> 
    1234 5678 90 
  </div> 
</div> 
<br/> 
<div class='wapper'> 
  <div class='div--2'> 
    1234 5678 90 
  </div> 
</div>

READ ALSO
Плавное изменение цвета фона строки
HTML

Плавное изменение цвета фона строки

Подскажите пожалуйста, как плавно изменить цвет фона поднятой строки на дефолтный(погасить)? На данный момент она гаснет(через setTimeout()), но резковыглядит...

 179
Как реализовать LocalStorage?
jQuery

Как реализовать LocalStorage?

Как в нижеуказанном коде реализовать LocalStorage? Чтобы значения не обнулялись при обновлении страницыКод - jsfiddle

 189
Как получить $(this).text? [дубликат]
jQuery

Как получить $(this).text? [дубликат]

На данный вопрос уже ответили:

 142
jQuery скрипт по добавлению класса
jQuery

jQuery скрипт по добавлению класса

Всем приветУ меня появилась проблема и мне очень нужна ваша помощь

 150