Сетка Flexbox - лучший способ прикрепить дочерний элемент к абсолютной позиции слева и вверх? - PullRequest
Новая
       19

Сетка Flexbox - лучший способ прикрепить дочерний элемент к абсолютной позиции слева и вверх?

0 голосов
/ 07 мая 2020

Я пытаюсь визуализировать очереди и процессы в системе. У каждого процесса есть одна (на данный момент) соответствующая очередь, из которой он извлекает данные. Я хочу, чтобы это выглядело примерно так:

enter image description here

Но я изо всех сил пытаюсь заставить эту работу работать "не-хакерским" способом. Основная проблема - добиться того, чтобы они были там, где я хочу, - с перекосом влево и вверх. Прямо сейчас каждый процесс и очередь помещаются в столбец. Затем этот столбец разделяется на два меньших столбца - один для процесса и один для очереди. (псевдокод) 

<Row>
   <Col>
    <Col md=3 queue />
      <Queue style={position relative top -XX%, left - YY%} />
    <Col md=9 process />
  </Col>
</Row>

Это работает, если я настраиваю смещение в зависимости от количества процессов, которые я отображаю в данный момент, но я не хочу этого делать. Я хочу решить эту проблему «гибким боксом», но не уверен, go как бы это сделать.

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Это может быть отправной точкой для подхода flexbox: 

.processes {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.process {
  padding-left: 40px;
  padding-top: 30px;
  position: relative
}

.queue {
  position: absolute;
  left: 0;
  top: 0;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 25px
}
<div class="processes">
  <div class="process">
    Process 1
    <div class="queue">
      Queue
    </div>
  </div>
  <div class="process">
    Process 2
    <div class="queue">
      Queue
    </div>
  </div>
  <div class="process">
    Process 3
    <div class="queue">
      Queue
    </div>
  </div>
</div>
0 голосов
/ 07 мая 2020

Я думаю, что css сетка - лучшее решение. Вот пример того, чего вы можете достичь. 

.container {
  display: grid;
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: 30px 30px;
  grid-column-gap: 20px;
  grid-row-gap: 10px;
}


.process, .quee {
  width: 60%;
  text-align: center;
  border: 1px solid lightgreen;
  border-radius: 30px;
}

.process {
  justify-self: end;
}

.quee {
  justify-self: start;
}
<div class="container">
    
    <article class="quee">quee</article>
    <article class="quee">quee</article>
    <article class="quee">quee</article>
    <article class="process">process</article>
    <article class="process">process</article>
    <article class="process">process</article>

</div>
...