Styling list elements with Flexbox - html

Question

Please help me. I need 3 li element like in image those I downloaded (icon+text), but they have wrong behavior.
I need like this
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
border: 1px solid purple;
height: 123px;
margin: 0;
padding: 0;
}
.advantages > * {
margin-left: 92px;
}
<ul class="advantages">
<li class="icon-equipment">Поставка оборудования<br> и запчастей<br><span>От 11 ведущих производителей</span><li>
<li class="icon-payment">Рассрочка платежа<br><span>До 45 дней с оформления заказа</span></li>
<li class="icon-delivery">Доставка товаров<br><span>Международная и междугородняя<br>в срок до 10 дней</span></li>
</ul>

Answer 1

The main thing to understand here is how to set-up a good hierarchy, so that you may have control over it. What I mean is, you have to separate your item into sections, which can be arranged easily using your model of choice (flexbox in this case).
Just take a look at the html that I have provided, see how it is structured. You have a container, within that container you have two elements, a left-side element (icon) and a right-side element (texts).
Styles are also a thing to notice, you will need some prefixing as well.
Since this is your first time on stackoverflow, I will give you this code ready for use. Usually you have to provide some code that you have been working on, and then seek assisstance for it. Whatever you do, please DO NOT expect this for future problems that you post here on Stack. Read the rules, follow the rules.
html {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.icon-equipment {
background-image: url('http://infocem.info/wp-content/uploads/2017/05/1.png');
background-position: left center;
background-repeat: no-repeat;
/* Adjust according to image size to push text across. */
}
ul {
list-style: none;
}
.advantages {
display: flex;
flex-flow: row wrap;
margin: 0;
padding: 0;
}
.advantages .advantages-item {
display: flex;
align-items: flex-start;
background: #000;
color: #fff;
padding: 1rem;
max-width: 300px;
margin-right: 1rem;
margin-bottom: 1rem;
}
.advantages .advantages-item:last-of-type {
margin-right: 0;
}
.advantages .advantages-item .item-right {
display: flex;
flex-direction: column;
padding-left: 1rem;
}
.advantages .advantages-item .item-right .right-text {
font-weight: bold;
text-transform: uppercase;
margin: 0;
margin-bottom: 1rem;
}
<ul class="advantages">
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
<li class="advantages-item">
<div class="item-left">
<div class="top-icon">
<img src="http://infocem.info/wp-content/uploads/2017/05/1.png" alt="" class="icon">
</div>
</div>
<div class="item-right">
<p class="right-text">Поставка оборудования и запчастей</p>
<span>От 11 ведущих производителей</span>
</div>
<li>
</ul>