Как сверстать блок на flexbox?

Question

Подскажите идею, как сверстать этот блок. Напишите, пожалуйста, мини-структуру. Я не понимаю, что делать со стрелками.

Answer 1

Верстаете 4 блока, стрелки делаете как :after с position:absolute и смещаете вправо на нужно количество пикселей. Большинство фреймворков (вроде bootstrap) делают отступы фиксированными (15px с каждой стороны в bootstrap), следовательно можно просто сместить элемент на фиксированное количество пикселей и он будет в нужном месте.

Если писать на чистом флексе, то просто добавляете к блоку padding нужный вам, делаете flex через calc() и считаете исходя от него.

Примерно так:

Будут вопросы - пишите, постараюсь помочь.

Для адаптивности просто через @media делаете нужные дополнения.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.element {
  position: relative;
  height: 100px;
  background: #d2ffd1;
  flex: calc(25% - 32px);
  padding: 0px 15px;
  border: 1px solid #000;
  line-height: 100px;
  text-align: center;
}

.element:after {
  position: absolute;
  width: 50px;
  height: 20px;
  line-height: 20px;
  top: 50%;
  margin-top: -10px;
  right: -30px;
  margin-right: 5px;
  background: #000;
  content: ">";
  text-align: center;
  color: #fff;
  z-index: 99;
}

.element:last-child::after {
  display: none;
}

<div class="container">
  <div class="element">
    element
  </div>
  <div class="element">
    element
  </div>
  <div class="element">
    element
  </div>
  <div class="element">
    element
  </div>
</div>

БЛОГ НА HUSL

Как сверстать блок на flexbox?

Ответы (1 шт):

Примерно так: