두 개의 열로 메뉴 항목 만들기

Question

페이지 중앙의 두 열에 메뉴 항목을 만들려고합니다. 바로 지금 그들은 하나의 수평선에있는 것처럼 보입니다. Flexbox를 사용하여이를 달성 할 수있는 방법이 있습니까? 다음은 코드입니다 : http://codepen.io/anon/pen/yCiLm

내 CSS :

.menu-opener, .menu-opener:hover, .menu-opener.active, .menu-opener-inner, .menu-opener-inner::before, .menu-opener-inner::after, .menu, .menu.active { 
    -webkit-transition: 250ms all; 
    transition: 250ms all; 
} 

.menu-opener { 
    cursor: pointer; 
    height: 64px; 
    position: absolute; 
    top: 2%; 
    right: 1%; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    width: 64px; 
} 
.menu-opener:hover, .menu-opener.active { 
    background: #231F20; 
} 

.menu-opener-inner { 
    background: #000; 
    height: .5rem; 
    margin-left: .75rem; 
    margin-top: 1.75rem; 
    width: 2.5rem; 
} 
.menu-opener-inner::before, .menu-opener-inner::after { 
    background: #000; 
    content: ''; 
    display: block; 
    height: .5rem; 
    width: 2.5rem; 
} 

.menu-opener-inner::before { 
    -webkit-transform: translateY(-0.75rem); 
    -ms-transform: translateY(-0.75rem); 
    transform: translateY(-0.75rem); 
} 
.menu-opener-inner::after { 
    -webkit-transform: translateY(0.25rem); 
    -ms-transform: translateY(0.25rem); 
    transform: translateY(0.25rem); 
} 
.menu-opener-inner.active { 
    background: transparent; 
} 
.menu-opener-inner.active::before { 
    background: #fff; 
    -webkit-transform: translateY(0rem) rotate(-45deg); 
    -ms-transform: translateY(0rem) rotate(-45deg); 
    transform: translateY(0rem) rotate(-45deg); 
} 
.menu-opener-inner.active::after { 
    background: #fff; 
    -webkit-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
    -ms-transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
    transform: translateY(-0.5rem) translateX(0rem) rotate(45deg); 
} 

.menu { 
    background: #231F20; 
    color: transparent; 
    height: 64px; 
    position: absolute; 
    top: 2%; 
right: 1%; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    width: 0rem; 
    z-index: -1; 
} 
.menu.active { 
    width: -webkit-calc(100% - 2rem); 
    width: calc(100% - 2rem); 
    height: calc(100% - 1rem); 
} 
.menu.active .menu-link { 
    color: white; 
} 

.menu-inner { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
    -webkit-flex-direction: row; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    height: 100%; 
    list-style-type: none; 
    margin: 0; 
    margin-left: 4rem; 
    padding: 0; 
} 

.menu-link { 
    color: transparent; 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-flex: 1; 
    -webkit-flex: 1 1 auto; 
    -ms-flex: 1 1 auto; 
    flex: 1 1 auto; 
    font-size: 2rem; 
    font-weight: 100; 
    height: 100%; 
    text-align: center; 
    text-decoration: none; 
} 
.menu-link li { 
    margin: auto; 
} 

@media screen and (max-width: 768px) { 
    .menu { 
    height: auto; 
    } 
    .menu-inner { 
    display: block; 
    } 
    .menu-link { 
    padding: 10px 0; 
    font-size: 1.2em; 
    } 
    .menu.active { 
    width: -webkit-calc(100% - 0.5rem); 
    width: calc(100% - 0.5rem); 
    } 
} 

Answer 1

추가 수 :

min-width: 50%; 

.menu 링크 클래스에?