Проблема форматирования Flexbox при включении текста и изображения ⇐ CSS

[Anonymous]

Я пытаюсь создать что-то подобное с помощью Flexbox, но у меня возникли трудности. См. пример изображения:




Я пробовал сделать это с плавающими числами и решил, что это слишком сложно. Поэтому вместо этого я играю с flexbox.

Я также использую свой CSS для передачи изображения.

Код: Выделить всё

.flex-container {
display: flex;
justify-content: center;
background-color: DodgerBlue;
}

.flex-container>div {
border: 1px solid #fff;
width: 300px;
justify-content: space-around;
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}

.row {
display: flex;
justify-content: center;
}

.row_cell {
flex: 1
}

.phoneimg {
display: flex;
background-image: url(%image(MS_HR_MR_PHONE_FL));
background-repeat: no-repeat;
content: "";
background-color: rgba(255, 255, 255, 0.0);
background-size: 55px 90px;
*/ width: 55px;
height: 90px;
}

Код: Выделить всё

column1




column2




column3



row

Я ожидаю увидеть столбцы, но все располагается вертикально.

Подробнее здесь: https://stackoverflow.com/questions/564 ... -and-image