Flexbox: как получить div, чтобы заполнить 100% ширины контейнера без упаковки?

Хотя прошло много времени и было сказано много правильных вещей, нет ответа, который связывает оба эффекта.

У вас есть 2 эффекта:

  1. a "special" , возможно незаметное поведение списков с += (как указано Scott Griffiths )
  2. , что задействованы атрибуты класса, а также атрибуты экземпляра (как указано в Может ли Berk Büder )

В классе foo метод __init__ изменяет атрибут класса. Это потому, что self.bar += [x] соответствует self.bar = self.bar.__iadd__([x]). __iadd__() для модификации места, поэтому он изменяет список и возвращает ссылку на него.

Обратите внимание, что экземпляр dict изменен, хотя это, как правило, не требуется, поскольку класс dict уже содержит одно и то же назначение , Таким образом, эта деталь почти незаметна - кроме случаев, когда вы делаете foo.bar = []. Здесь экземпляры bar остаются теми же благодаря сказанному факту.

Однако в классе foo2 используется bar класса, но не затрагивается. Вместо этого к нему добавляется [x], образуя новый объект, так как здесь вызывается self.bar.__add__([x]), который не изменяет объект. Результат помещается в экземпляр dict then, давая экземпляру новый список как dict, в то время как атрибут класса остается модифицированным.

Различие между ... = ... + ... и ... += ... также влияет на присвоения впоследствии :

f = foo(1) # adds 1 to the class's bar and assigns f.bar to this as well.
g = foo(2) # adds 2 to the class's bar and assigns g.bar to this as well.
# Here, foo.bar, f.bar and g.bar refer to the same object.
print f.bar # [1, 2]
print g.bar # [1, 2]

f.bar += [3] # adds 3 to this object
print f.bar # As these still refer to the same object,
print g.bar # the output is the same.

f.bar = f.bar + [4] # Construct a new list with the values of the old ones, 4 appended.
print f.bar # Print the new one
print g.bar # Print the old one.

f = foo2(1) # Here a new list is created on every call.
g = foo2(2)
print f.bar # So these all obly have one element.
print g.bar 

Вы можете проверить идентичность объектов с помощью print id(foo), id(f), id(g) (не забудьте дополнительные () s, если вы находитесь на Python3).

BTW: Оператор += называется «расширенным назначением» и, как правило, имеет целью сделать возможными модификации на месте.

41
задан indextwo 6 June 2015 в 15:50
поделиться

2 ответа

Чтобы предотвратить сжатие элементов изгиба, установите для коэффициента сжатия значение 0:

Коэффициент изгиба определяет, насколько гибкий элемент будет сжиматься относительно остальных гибких элементов в гибком контейнере при распределении отрицательного свободного пространства. Когда опущено, оно установлено в 1.

.boxcontainer .box {
  flex-shrink: 0;
}

* {
  box-sizing: border-box;
}
.wrapper {
  width: 200px;
  background-color: #EEEEEE;
  border: 2px solid #DDDDDD;
  padding: 1rem;
}
.boxcontainer {
  position: relative;
  left: 0;
  border: 2px solid #BDC3C7;
  transition: all 0.4s ease;
  display: flex;
}
.boxcontainer .box {
  width: 100%;
  padding: 1rem;
  flex-shrink: 0;
}
.boxcontainer .box:first-child {
  background-color: #F47983;
}
.boxcontainer .box:nth-child(2) {
  background-color: #FABCC1;
}
#slidetrigger:checked ~ .wrapper .boxcontainer {
  left: -100%;
}
#overflowtrigger:checked ~ .wrapper {
  overflow: hidden;
}
<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />
<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>
<div class="wrapper">
  <div class="boxcontainer">
    <div class="box">
      First bunch of content.
    </div>
    <div class="box">
      Second load  of content.
    </div>
  </div>
</div>
42
ответ дан Oriol 6 June 2015 в 15:50
поделиться

В моем случае простое использование flex-shrink: 0 не сработало. Но добавление flex-grow: 1 к этому сработало.

.item {
    flex-shrink: 0;
    flex-grow: 1;
}
11
ответ дан Neil Patrao 6 June 2015 в 15:50
поделиться
Другие вопросы по тегам:

Похожие вопросы: