Как сверстать такой текст с картинкой?

Question

[Ilya muromtsev]

не могу понять, как выполнить такою верстку?

Answer 1

[campus1]

В каком месте непонятно??

Картинки, span и ссылка. флексами в 2 строчки
Каждую сеть оборачиваете в блок, а блоку дайте dispay: flex, ну и marginами поиграйтесь

Comments

[Ilya muromtsev]

вот что получилось.. вроде как получилось, не правда ли? =) или есть варианты получше?

https://codepen.io/muromtsev/pen/LjZZZp

<div class="social">
	<img src="https://cdn0.iconfinder.com/data/icons/social-flat-rounded-rects/512/facebook-256.png" alt="">
	<div class="flex">	
		<span>Facebook</span>
		<a href="#">https://www.facebook.com/username</a>
	</div>
</div>

.social {
	max-width: 300px;
	min-height: 300px;
	font-family: monospace;
	padding: 10px;
}
img {
	float: left;
	margin-right: 15px;
	width: 100%;
	max-width: 32px;
}
.flex {
	display: flex;
	flex-direction: column;
	max-width: 250px;
}
.flex a {
	margin-top: 3px;
	text-decoration: none;
}

Answer 2

[Андрей]

вот мой вариант
https://jsfiddle.net/1e6er0f1/

Comments

[Ilya muromtsev]

Отлично! С флексбоксом приятней, разве нет?)