Нужна помощь по css , как вставить текст черный с задним фоном для каждой гистограммы ,чтоб одступы одинаковые были и находились возле каждой диаграммы не сьезжая при масштабировании ? Можно пример какой-то пожалуйста ?
Сделал чтоб в столбик текст выводило и закрашивало текст https://codepen.io/anon/pen/zLxBo , но вот только фон для текста одинаковый ,как сделать разный цвет ?
<div class="flex-container">
<div class="row">
<span class="flex-item">ЧО-1</span>
</div>
<div class="row">
<span class="flex-item">ЧО-2</span>
</div>
<div class="row">
<span class="flex-item">ЧО-3</span>
</div>
<div class="row">
<span class="flex-item">ЧО-4</span>
</div>
<div class="row">
<span class="flex-item">ЧО-5</span>
</div>
<div class="row">
<span class="flex-item">ЧО-6</span>
</div>
</div>
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
row{
width: 100%;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin: 10px;
line-height: 70px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}