Using Flexbox rather than Floats

HTML

<h2>Here is the float version</h2>
<p>This is fine unless you need to center the elements inside this container. To get the x in the middle of these boxes, i used to add padding to the top each time, now with flex you can just add align-items:center and justify-content: center; as seen in the flex example below. </p>
<div class='float-wrap'>
	<div class='round-ball float-element'>x</div>
	<div class='round-ball float-element'>x x</div>
	<div class='round-ball float-element'>x</div>
	<div class='round-ball float-element'>x x</div>
	<div class='round-ball float-element'>x</div>
</div>

<h2>Flex version</h2>
<p>This is much better as you can set the way they align much easier. Also you can use the justify-content: center; to make sure the content is centered, and if you want vertical align center you can use: align-items: center; this seems to have issues if there is more than one element in there. </p>
<div class='flex-wrap'>
	<div class='round-ball flex-element'>x</div>
	<div class='round-ball flex-element'>x x</div>
	<div class='round-ball flex-element'>x</div>
	<div class='round-ball flex-element'>x x</div>
	<div class='round-ball flex-element'>x</div>
</div>

CSS

.float-wrap {
	overflow:hidden;
}
.round-ball {
	width:100px;
	height:100px;
	background:#717171 linear-gradient(#717171,#444444);
	box-shadow:0px 1px 2px rgba(0,0,0,0.4);
	border-radius:100px;
	margin:0 10px 10px 0;
	text-align:center;
	color:#FFF;
}
.float-element {
	float:left;
	vertical-align:middle;
	padding-top:34px;
}
.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.flex-element {
  display: flex;
  align-items: center;
  justify-content: center;
}