Создание cv элементов с помощью flexbox - PullRequest
Новая
       13

Создание cv элементов с помощью flexbox

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

Я хочу сделать div, который включает в себя мой опыт.See the example

Поэтому я попытался создать div (обертку), который включает span для каждого слова.Затем я попробовал на каждом элементе с nth-child придать стиль justify-content: flex-end;

Элемент действительно завершается, но следующий элемент не занимает его.Поэтому, если я попытаюсь flex-end «verkoopmedewerker», он пойдет вправо, но на прежнем месте появится разрыв, поэтому у «планок» будет разрыв между «functie» и самим собой.

Как мне достичьчто изображено на картинке?

См. мою демонстрацию здесь 

.baan {
  display: flex;
  flex-flow: column;
  background: red;
  width: 40%;
}

.baan :nth-child(3) {
  align-self: flex-end;
}
<h3>Bijbaan</h3>
<div class="baan">
  <strong>Lidl</strong>
  <span>Functie</span>
  <span class="rechts">Verkoopmedewerker</span>
  <span>Plaats</span>
  <span class="rechts">Almeloplein 73
          2533 AD, Den Haag
          Part-time, 54 uur P. week
          </span>
</div>

1 Ответ

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

Это возможное решение flexbox: 

.baan {
  display: flex;
  flex-flow: row wrap;
  background: red;
  width: 40%;
}

.baan span{
  flex: 1 1 50%; /*change width if you don't want the same width for every "span"*/
}

.baan strong{
  flex: 1 1 100%;
}

.baan .rechts{
  text-align:right;
}

Однако я думаю, что CSS-сетка лучше в вашем случае, потому что работает в 2 направлениях: строки и столбцы.Flexbox хорошо работает только в одном направлении, и вы должны «взломать» этот предел, если хотите, чтобы он работал как сетка.

...