using flexbox rather than float

4:21 am, January 16, 2019

Code

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>

using flexbox rather than float

Code

Download & Run

Preview