Как подогнать размеры фона и слоя переднего плана с помощью CSS flexbox - PullRequest
Новая
       16

Как подогнать размеры фона и слоя переднего плана с помощью CSS flexbox

0 голосов
/ 27 апреля 2018

В моем веб-приложении у меня есть фон и оверлейный слой, оба могут расти, а если один из них растет, другой должен расти до одинакового размера. Другими словами: у меня есть стек элементов HTML, и их размеры должны быть синхронизированы, следуя за самым большим элементом.

Есть ли способ сделать это с простым изгибом? ( без float и transform хаков)

Вот некоторый псевдокод, чтобы обозначить мою проблему: 

<container>
   <background>has min-height of container height. Can grow (and cause scrollbars) if dynamic content takes more height</background>
   <foreground>some overlay that should cover the background completely (following the size of the 'background' element, not the size of the 'container' element.)</foreground>
</container>

1 Ответ

0 голосов
/ 27 апреля 2018

Я придумал следующее решение:

  • используйте флекс-элементы с каждым 100% размером флекс-контейнера,
  • установите значение поля слева для -100% для каждого элемента, кроме первого. 

/* demo setup */

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  font-size: 16pt;
}

section {
  flex-basis: 0;
  border: 3px dashed blue;
}

.background {
  background-color: beige;
}

.overlay1 {
  background: linear-gradient(180deg, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0) 100%);
  text-align: right;
}

.overlay2 {
  background: linear-gradient(90deg, rgba(0, 255, 0, 0.5) 0%, rgba(0, 255, 0, 0) 100%);
}

/* actual solution */

.flex-stack {
  display: flex;
}

.flex-stack>* {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: -100%;
}

.flex-stack> :first-child {
  margin-left: 0;
}
<section class="flex-stack">
  <p class="background" style="min-height:8em;">
    This is the background layer.
  </p>
  <p class="overlay1"><br> this is some overlay box.
  </p>
  <p class="overlay2"><br><br>
    <textarea style="resize: both;">This is resizable content: drag the lower left corner of the the textarea.
  </textarea><br> this is another overlay box.
  </p>
</section>
...