I want to align the items in row menu and row content vertically by using Flex, but I can not seem to get the code to work. Both classes do have the right height, which I have achieved by using Flex as well.
/* Appearance */html,body { width: 100%; height: 100%; margin: 0; padding: 0;}body { color: #fff; font-family: 'Lato', sans-serif; text-align: center; background: #5e129f; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjNWUxMjlmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzk2MDAzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(-45deg, #5e129f 0%, #960030 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #5e129f), color-stop(100%, #960030)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #5e129f 0%, #960030 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #5e129f 0%, #960030 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #5e129f 0%, #960030 100%); /* IE10+ */ background: linear-gradient(135deg, #5e129f 0%, #960030 100%); /* W3C */ filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#5e129f', endColorstr='#960030', GradientType=1); /* IE6-8 fallback on horizontal gradient */}nav { float: right; margin-left: 2em;}h1 { color: #FFF;}.button.one { background: transparent; border: 0.0625em solid #5E129F; /* 1/16 */}.button.two { background-color: #5E129F;}#brand { float: left; margin-right: 2em;}.container { display: flex; height: 100%; flex-flow: column nowrap;}.row.menu { flex: 1; justify-content: center;}.row.content { flex: 11; justify-content: center;}/* ignore - foundation stylesheet */button,.button { border-style: solid; border-width: 0; cursor: pointer; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-weight: normal; line-height: normal; margin: 0 0 1.25rem; position: relative; text-decoration: none; text-align: center; -webkit-appearance: none; border-radius: 0; display: inline-block; padding-top: 1rem; padding-right: 2rem; padding-bottom: 1.0625rem; padding-left: 2rem; font-size: 1rem; background-color: #2ba6cb; border-color: #2285a2; color: #FFFFFF; transition: background-color 300ms ease-out;}button:hover,button:focus,.button:hover,.button:focus { background-color: #2285a2;}button:hover,button:focus,.button:hover,.button:focus { color: #FFFFFF;}button.secondary,.button.secondary { background-color: #e9e9e9; border-color: #bababa; color: #333333;}button.secondary:hover,button.secondary:focus,.button.secondary:hover,.button.secondary:focus { background-color: #bababa;}button.secondary:hover,button.secondary:focus,.button.secondary:hover,.button.secondary:focus { color: #333333;}button.success,.button.success { background-color: #5da423; border-color: #4a831c; color: #FFFFFF;}button.success:hover,button.success:focus,.button.success:hover,.button.success:focus { background-color: #4a831c;}button.success:hover,button.success:focus,.button.success:hover,.button.success:focus { color: #FFFFFF;}button.alert,.button.alert { background-color: #c60f13; border-color: #9e0c0f; color: #FFFFFF;}button.alert:hover,button.alert:focus,.button.alert:hover,.button.alert:focus { background-color: #9e0c0f;}button.alert:hover,button.alert:focus,.button.alert:hover,.button.alert:focus { color: #FFFFFF;}button.warning,.button.warning { background-color: #f08a24; border-color: #cf6e0e; color: #FFFFFF;}button.warning:hover,button.warning:focus,.button.warning:hover,.button.warning:focus { background-color: #cf6e0e;}button.warning:hover,button.warning:focus,.button.warning:hover,.button.warning:focus { color: #FFFFFF;}button.info,.button.info { background-color: #a0d3e8; border-color: #61b6d9; color: #333333;}button.info:hover,button.info:focus,.button.info:hover,.button.info:focus { background-color: #61b6d9;}button.info:hover,button.info:focus,.button.info:hover,.button.info:focus { color: #FFFFFF;}button.large,.button.large { padding-top: 1.125rem; padding-right: 2.25rem; padding-bottom: 1.1875rem; padding-left: 2.25rem; font-size: 1.25rem;}button.small,.button.small { padding-top: 0.875rem; padding-right: 1.75rem; padding-bottom: 0.9375rem; padding-left: 1.75rem; font-size: 0.8125rem;}button.tiny,.button.tiny { padding-top: 0.625rem; padding-right: 1.25rem; padding-bottom: 0.6875rem; padding-left: 1.25rem; font-size: 0.6875rem;}button.expand,.button.expand { padding-right: 0; padding-left: 0; width: 100%;}button.left-align,.button.left-align { text-align: left; text-indent: 0.75rem;}button.right-align,.button.right-align { text-align: right; padding-right: 0.75rem;}button.radius,.button.radius { border-radius: 3px;}button.round,.button.round { border-radius: 1000px;}button.disabled,button[disabled],.button.disabled,.button[disabled] { background-color: #2ba6cb; border-color: #2285a2; color: #FFFFFF; cursor: default; opacity: 0.7; box-shadow: none;}button.disabled:hover,button.disabled:focus,button[disabled]:hover,button[disabled]:focus,.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus { background-color: #2285a2;}button.disabled:hover,button.disabled:focus,button[disabled]:hover,button[disabled]:focus,.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus { color: #FFFFFF;}button.disabled:hover,button.disabled:focus,button[disabled]:hover,button[disabled]:focus,.button.disabled:hover,.button.disabled:focus,.button[disabled]:hover,.button[disabled]:focus { background-color: #2ba6cb;}button.disabled.secondary,button[disabled].secondary,.button.disabled.secondary,.button[disabled].secondary { background-color: #e9e9e9; border-color: #bababa; color: #333333; cursor: default; opacity: 0.7; box-shadow: none;}button.disabled.secondary:hover,button.disabled.secondary:focus,button[disabled].secondary:hover,button[disabled].secondary:focus,.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus { background-color: #bababa;}button.disabled.secondary:hover,button.disabled.secondary:focus,button[disabled].secondary:hover,button[disabled].secondary:focus,.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus { color: #333333;}button.disabled.secondary:hover,button.disabled.secondary:focus,button[disabled].secondary:hover,button[disabled].secondary:focus,.button.disabled.secondary:hover,.button.disabled.secondary:focus,.button[disabled].secondary:hover,.button[disabled].secondary:focus { background-color: #e9e9e9;}button.disabled.success,button[disabled].success,.button.disabled.success,.button[disabled].success { background-color: #5da423; border-color: #4a831c; color: #FFFFFF; cursor: default; opacity: 0.7; box-shadow: none;}button.disabled.success:hover,button.disabled.success:focus,button[disabled].success:hover,button[disabled].success:focus,.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus { background-color: #4a831c;}button.disabled.success:hover,button.disabled.success:focus,button[disabled].success:hover,button[disabled].success:focus,.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus { color: #FFFFFF;}button.disabled.success:hover,button.disabled.success:focus,button[disabled].success:hover,button[disabled].success:focus,.button.disabled.success:hover,.button.disabled.success:focus,.button[disabled].success:hover,.button[disabled].success:focus { background-color: #5da423;}button.disabled.alert,button[disabled].alert,.button.disabled.alert,.button[disabled].alert { background-color: #c60f13; border-color: #9e0c0f; color: #FFFFFF; cursor: default; opacity: 0.7; box-shadow: none;}button.disabled.alert:hover,button.disabled.alert:focus,button[disabled].alert:hover,button[disabled].alert:focus,.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus { background-color: #9e0c0f;}button.disabled.alert:hover,button.disabled.alert:focus,button[disabled].alert:hover,button[disabled].alert:focus,.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus { color: #FFFFFF;}button.disabled.alert:hover,button.disabled.alert:focus,button[disabled].alert:hover,button[disabled].alert:focus,.button.disabled.alert:hover,.button.disabled.alert:focus,.button[disabled].alert:hover,.button[disabled].alert:focus { background-color: #c60f13;}button.disabled.warning,button[disabled].warning,.button.disabled.warning,.button[disabled].warning { background-color: #f08a24; border-color: #cf6e0e; color: #FFFFFF; cursor: default; opacity: 0.7; box-shadow: none;}button.disabled.warning:hover,button.disabled.warning:focus,button[disabled].warning:hover,button[disabled].warning:focus,.button.disabled.warning:hover,.button.disabled.warning:focus,.button[disabled].warning:hover,.button[disabled].warning:focus { background-color: #cf6e0e;}button.disabled.warning:hover,button.disabled.warning:focus,button[disabled].warning:hover,button[disabled].warning:focus,.button.disabled.warning:hover,.button.disabled.warning:focus,.button[disabled].warning:hover,.button[disabled].warning:focus { color: #FFFFFF;}button.disabled.warning:hover,button.disabled.warning:focus,button[disabled].warning:hover,button[disabled].warning:focus,.button.disabled.warning:hover,.button.disabled.warning:focus,.button[disabled].warning:hover,.button[disabled].warning:focus { background-color: #f08a24;}button.disabled.info,button[disabled].info,.button.disabled.info,.button[disabled].info { background-color: #a0d3e8; border-color: #61b6d9; color: #333333; cursor: default; opacity: 0.7; box-shadow: none;}button.disabled.info:hover,button.disabled.info:focus,button[disabled].info:hover,button[disabled].info:focus,.button.disabled.info:hover,.button.disabled.info:focus,.button[disabled].info:hover,.button[disabled].info:focus { background-color: #61b6d9;}button.disabled.info:hover,button.disabled.info:focus,button[disabled].info:hover,button[disabled].info:focus,.button.disabled.info:hover,.button.disabled.info:focus,.button[disabled].info:hover,.button[disabled].info:focus { color: #FFFFFF;}button.disabled.info:hover,button.disabled.info:focus,button[disabled].info:hover,button[disabled].info:focus,.button.disabled.info:hover,.button.disabled.info:focus,.button[disabled].info:hover,.button[disabled].info:focus { background-color: #a0d3e8;}button::-moz-focus-inner { border: 0; padding: 0;}<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Flexbox test</title><!-- Flexbox--><link href="css/flexbox.css" rel="stylesheet"><link href="css/foundation.min.css" rel="stylesheet"><link rel="stylesheet" href="css/style.css" type="text/css" /></head><body><div class="container"><div class="row menu"><div class="small-12 small-centered columns"><div id="brand"> Creative Aid</div><nav> Link1 Link2 Link3</nav></div></div><div class="row content"><div class="small-12 small-centered columns"><h1>Title</h1><p>Insert your text here.</p><a href="#" class="button small">Small Button</a><a href="#" class="button small">Small Button</a></div></div></div></body></html>