Как рассчитывается гибкая основа, если ширина гибкого элемента составляет 100%? - PullRequest
Новая
       4

Как рассчитывается гибкая основа, если ширина гибкого элемента составляет 100%?

0 голосов
/ 04 марта 2019

Начальное значение flex-based автоматически измеряется в зависимости от содержимого элементов flex.И элемент содержимого img зависит от ширины родительского элемента (width: 100%).Другими словами, между элементом flex и элементом img возникает бесконечный цикл ссылки.

Фактически, однако, как и в следующем фрагменте кода, обработка не остановится с бесконечным циклом.Почему это?Как браузер (спецификация) избегает бесконечных циклов?

.row {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  background: #faf;
  height: 120px;
}

.text {
  background: #ffa;
}

img {
  width: 200%;
}
<div class="row post">
  <a href="#" class="text">
    <img src="https://placeimg.com/150/50/animals">
  </a>
</div>

1 Ответ

0 голосов
/ 04 марта 2019

Фактически, однако, как и в следующем фрагменте кода, обработка не остановится с бесконечным циклом.Почему это?Как браузер (спецификация) избегает бесконечных циклов?

Не существует бесконечного цикла, и правило состоит в том, чтобы не возвращаться назад.В общем, браузер выполняет только одну итерацию бесконечного цикла .

В основном в вашем случае вы использовали width:200%, поэтому нам нужна ссылка на содержащий блок (.text), чтобы вычислить это, но мы не определили ширину там, так что браузер как-то проигнорирует эту ширину, которая даст нам этот вывод 

.row {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  background: #faf;
  height: 120px;
}

.text {
  background: #ffa;
}

img {
  /*width: 200%;*/
}
<div class="row post">
  <a href="#" class="text">
    <img src="https://placeimg.com/150/50/animals">
  </a>
</div>

Теперь, когда у нас есть ширина для нашего содержащего блока, мы будем использовать его как ссылку на изображение, чтобы сделать его в два раза больше ширины .test, чтотакже его начальная ширина.

.row {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  background: #faf;
  height: 120px;
}

.text {
  background: #ffa;
}

img {
  width: 200%;
}
<div class="row post">
  <a href="#" class="text">
    <img src="https://placeimg.com/150/50/animals">
  </a>
</div>

Теперь тривиально, что если вы используете width:100%, ничего не произойдет, так как все ширины останутся неизменными.

Это не относится к flexbox и может произойти в другой ситуации.

Вот еще один пример с inline-block: 

.text {
  background: #ffa;
  display: inline-block;
  height:200px;
}

img {
  width: 200%;
}
<a href="#" class="text">
  <img src="https://placeimg.com/150/50/animals">
</a>

Здесь происходит та же логика: inline-block использует изображение для определения его ширины, затем мы перемещаемся к изображению и больше не возвращаемся.

Другой пример без изображения: 

.text {
  background: #ffa;
  float:left;
  height:100px;
}

.img {
  width: 50%;
  background:red;
}
<a href="#" class="text">
  <div class="img"> some text here</div>
</a>

Вот часть спецификации, объясняющая это: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

Некоторые соответствующие цитаты:

.. Иногда размер блока, содержащего блок в процентах, зависит от вклада внутреннего размера самого блока, , создавая циклическую зависимость .При расчете размера содержащего блока процент ведет себя как авто .


.. Размер содержащего блока равен не разрешается повторно в зависимости от полученного размера поля ;таким образом, содержимое может переполниться или опуститься содержащий блок.

...