гибкий дисплей игнорирует масштабное преобразование содержимого - PullRequest
Новая
       17

гибкий дисплей игнорирует масштабное преобразование содержимого

0 голосов
/ 10 июня 2018

Я использую контейнер с display: flex и масштабируем до ширины сайта.Содержимое контейнера представляет собой несколько ссылок внутри div-элементов с transform:scale(1.5,1) по эстетическим соображениям.Однако flexbox, похоже, игнорирует масштабирование CSS-преобразования, и когда они достигают больших размеров, они просто перекрываются, а также не будут обтекать линии (даже при установленном flex-wrap: wrap).Пример: 

#flexbox-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  height: 100px;
  width: 400px;
  border: 1px solid black;
}

.inner-content {
  transform-origin: left;
  transform: scale(1.5, 1);
  background: grey;
  border: 1px solid red;
  height: 98px;
  width: 98px;
  /* 98px since the border gets added around resulting in 100px */
  opacity: 0.5;
}
<div id="flexbox-container">
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
  <div class="inner-content"></div>
</div>

Может кто-нибудь знает хитрость, как заставить flexbox рассчитывать с преобразованными размерами?

Ответы [ 2 ]

0 голосов
/ 10 июня 2018

Мне удалось решить мою проблему, приняв ответ в Процент изменения размера изображения CSS от самого себя? .

Я использую скрытую версию текста с увеличенным размером шрифта (этотребует, чтобы вы знали текущий размер шрифта и умножили его на масштаб преобразования) для размера элемента flex.Фактически преобразованный элемент получает position:absolute и позиционируется на left:0.Это результат: 

#flexbox-container {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  width: 250px;
  
  border: 1px solid black;
}

.inner-content {
  position: relative;

  background: grey;
  border: 1px solid red;
  opacity: 0.5;
}

.inner-content .fake {
  float: left;
  visibility: hidden;
  width: auto;
  font-size: 1.67rem;
  height: 1.5ex;
}

.inner-content .span_wrap {
  position: absolute;
  left: 0;
  display: inline-block;
  transform-origin: left;
  transform: scale(1.67, 1);
}
<div id="flexbox-container">
  <div class="inner-content">
    <span class="fake">
      Lorem
    </span>
    <div class="span_wrap">
      Lorem
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      ipsum
    </span>
    <div class="span_wrap">
      ipsum
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      dolor
    </span>
    <div class="span_wrap">
      dolor
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      sit
    </span>
    <div class="span_wrap">
      sit
    </div>
  </div>
  <div class="inner-content">
    <span class="fake">
      amet
    </span>
    <div class="span_wrap">
      amet
    </div>
  </div>
</div>
0 голосов
/ 10 июня 2018

Вы должны использовать flex-grow вместо transform:scale1.5,1).

Здесь Fiddle

...