Currently my "flex" items look like this (vertically aligned: top)...
_____________________________________
1
_____________________________________
2
_____________________________________
3
_____________________________________
4
_____________________________________
My Goal is to make them look like this (vertically aligned: middle)...
_____________________________________
1
_____________________________________
2
_____________________________________
3
_____________________________________
4
_____________________________________
My requirements:
- The flex container must stay at 100% in height
- The flex items must stay 25% in height (equaling 100%, which is its default anyway).
- The flex items must be vertically centered.
- This must be responsive and be smart enough to stay in the middle per device (so no line-height/padding)
http://jsfiddle.net/oneeezy/p4XtA/
HTML
<!-- Flex Box -->
<section>
<!-- Flex Items -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
CSS
/* Flex Box */
section { padding: 1em; background: black; display: flex; flex-flow: column; height: 100%; justify-content: space-around; }
/* Flex Items */
div { border-top: 1px solid #ccc; background: #f2f2f2; height: 25%; }
div:first-child { border-top: 1px solid transparent; }
div:hover { background: white; }