CSS3 Flexbox 구조 최적화

Question

저는 flexbox와 CSS를 처음 접했습니다. 이 구조를 최적화 할 방법이 있는지 알고 싶습니다. 작동하지만 엉망이 생깁니다.

ul#flexmenu { 
    display: flex; 
    -webkit-display: flex; 
    align-items: center; 
    flex-direction: column; 
    -webkit-flex-direction: column; 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    content: 'viewport-units-buggyfill; width: 100vw;'; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; /* Opera/IE 8+ */ 
    -webkit-overflow-scrolling: touch; 

     -webkit-backface-visibility: hidden; 
     -webkit-perspective: 1000; 
     backface-visibility: hidden; 
     perspective: 1000; 
     -webkit-transform: translateZ(0); 
     transform:translateZ(0); 
} 

    ul#flexmenu > li { 
     display: flex; 
     display: -webkit-flex; 
     flex-direction: row; 
     -webkit-flex-direction: row; 
     justify-content: flex-start; 
     flex-grow: 0; 
     flex-shrink: 0; 
     align-items: center; 
     -webkit-align-items: center; 
     height: 20vh; 
     width: 100vw; 
     content: 'viewport-units-buggyfill; width: 100vw; height: 20vh;'; 
     position:relative; 
     z-index: 2; 

    } 

    ul#flexmenu > li.disabled { 
     background:black; 
    } 

    ul#flexmenu li > a, 
    ul#flexmenu li > span, 
    ul#flexmenu li > div > a, 
    ul#flexmenu li > div > span, 
    ul#flexmenu li > input[type='text'], 
    ul#flexmenu li > input[type='number'] { 
     padding: 0 1.1em; 
     text-transform: uppercase; 
     color: white; 
     text-decoration: none; 
     font-size: 5.5vh; 
     line-height: 5.5vh; 
     content: 'viewport-units-buggyfill; line-height:5.5vh; font-size: 5.5vh;'; 
    } 

    ul#flexmenu li > div { 
     height:20vh; 
     width:100vw; 
     line-height:20vh; 
     background:inherit; 
     z-index:2; /*fix for context menu so it comes on top*/ 
     -webkit-backface-visibility: hidden; 
     -webkit-perspective: 1000; 
     backface-visibility: hidden; 
     perspective: 1000; 
     -webkit-transform: translateZ(0); 
     transform:translateZ(0); 
    } 


li select { 
    top: 0; 
    height: 20vh; 
    opacity: 0; 
    position: absolute; 
    content: 'viewport-units-buggyfill; height: 20vh;'; 
} 

li.three > select { 
    width: 33.3vw; 
    content: 'viewport-units-buggyfill; width: 33.3vw;'; 
} 

ul#flexmenu li > ul { 
    display: flex; 
    display: -webkit-flex; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box; /* Opera/IE 8+ */ 
    height: 20vh; 
    background: inherit; 
    width: 100vw; 
    content: 'viewport-units-buggyfill; width: 100vw;'; 
} 

    ul#flexmenu li > ul.col { 
     flex-direction: row; 
     -webkit-flex-direction: row; 
    } 

     ul#flexmenu li > ul.col > li.two.offset { 
      width: 35vw; 
      content: 'viewport-units-buggyfill; width: 35vw;'; 
     } 

      ul#flexmenu li > ul.col > li.two.offset + li { 
       width: 65vw; 
       content: 'viewport-units-buggyfill; width: 65vw;'; 
      } 

    ul#flexmenu li > ul.row { 
     flex-direction: column; 
     -webkit-flex-direction: column; 
    } 

    ul#flexmenu li > ul > li { 
     display: flex; 
     display: -webkit-flex; 
     flex-grow: 0; 
     flex-shrink: 0; 
     justify-content: center; 
     -webkit-justify-content: center; 
     align-items: center; 
     -webkit-align-items: center; 
     position: relative; /*fix for absolute positionned elements (dropdowns inside flexmenu lis)*/ 
    } 

    ul#flexmenu li > ul.row > li, 
    ul#flexmenu li > ul.row > li > ul.col { 
     height: 10vh !important; 
     content: 'viewport-units-buggyfill; height: 10vh !important;'; 
    } 

     ul#flexmenu li > ul.row > li span, 
     ul#flexmenu li > ul.row > li a, 
     ul#flexmenu li > ul.row > li input { 
      padding: 0 1.4em; 
      font-size: 6vw; 
      line-height: 6vw; 
      content: 'viewport-units-buggyfill; line-height:6vw; font-size: 6vw;'; 
     } 

li.justify-left { 
    justify-content: flex-start !important; 
    -webkit-justify-content: flex-start !important; 
} 

ul#flexmenu li > ul > li.three, 
ul#flexmenu li > ul > li.two, 
ul#flexmenu li > ul > li.four { 
    display: flex; 
    display: -webkit-flex; 
    -ms-flex-direction: row; 
    flex-direction: row; 
    align-items:center; 
    -webkit-align-items: center; 
    border: 1px solid white; 
} 

ul#flexmenu li > ul > li.two { 
    width: 50vw; 
    content: 'viewport-units-buggyfill; width: 50vw;'; 
} 

ul#flexmenu li > ul > li.three { 
    width: 33.3vw; 
    content: 'viewport-units-buggyfill; width: 33.3vw;'; 
} 

ul#flexmenu li > ul > li.four { 
    width: 25vw; 
    content: 'viewport-units-buggyfill; width: 25vw;'; 
} 


li.two > a, 
li.two > span { 
    font-size: 6vw !important; 
    line-height: 6vw !important; 
    content: 'viewport-units-buggyfill; line-height: 6vw !important; font-size: 6vw !important;'; 
} 

li.three > a, 
li.three > span { 
    font-size: 5vw !important; 
    line-height: 5vw !important; 
    content: 'viewport-units-buggyfill; line-height: 5vw !important; font-size: 5vw !important;'; 
} 

li.four > a, 
li.four > span { 
    font-size: 4vw !important; 
    line-height: 4vw !important; 
    content: 'viewport-units-buggyfill; line-height: 4vw !important; font-size: 4vw !important;'; 
} 

li.two:first-child { 
    border-width: 0 1px 0 0 !important; 
} 

li.two:last-child { 
    border-width: 0 !important; 
} 

li.three:nth-child(1) { 
    border-width: 0 1px 0 0 !important; 
} 

li.three:nth-child(2) { 
    border-width: 0 1px 0 0 !important; 
} 

li.three:nth-child(3) { 
    border-width: 0 0 0 0 !important; 
} 

li.four:nth-child(1) { 
    border-width: 0 1px 0 0 !important; 
} 

li.four:nth-child(2) { 
    border-width: 0 1px 0 0 !important; 
} 

li.four:nth-child(3) { 
    border-width: 0 1px 0 0 !important; 
} 

li.four:nth-child(4) { 
    border-width: 0 0 0 0 !important; 
} 

샘플 사용법 : (이 많이, 때로는 우리가 .. 다른 중첩 된 UL 문양 등이 다름)

<ul id="flexmenu"> 
      <li class="gradient-one"> 
       <input type="text" ng-model="filterText" placeholder="SEARCH" /> 
      </li> 
      <li ng-repeat="contact in contacts | orderBy: 'displayName' | filter: filterText track by contact.id" ng-class-odd="'gradient-two'" ng-class-even="'gradient-three'"> 
       <div class="context-wrapper" context="contact"> 
        <span>{{contact.displayName | limitTo: 11}}{{contact.displayName.length > 11 ? '...' : ''}}</span> 
       </div> 
      </li> 
     </ul> 

JSFiddle : http://jsfiddle.net/5neaar1r/

감사합니다.

Answer 1

아마, 이런 일이 (적어도으로 시작) :

ul#flexmenu, 
ul#flexmenu > li, 
ul#flexmenu li > ul, 
ul#flexmenu li > ul > li, 
ul#flexmenu li > ul > li.two, 
ul#flexmenu li > ul > li.three, 
ul#flexmenu li > ul > li.four { 
-webkit-display: flex; display: flex; 
} 

ul#flexmenu, 
ul#flexmenu li > ul.row { 
-ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; 
} 

ul#flexmenu > li, 
ul#flexmenu li > ul.col, 
ul#flexmenu li > ul > li.two, 
ul#flexmenu li > ul > li.three, 
ul#flexmenu li > ul > li.four { 
-ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row; 
} 

ul#flexmenu, 
ul#flexmenu li > ul { 
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
} 

ul#flexmenu, 
ul#flexmenu > li, 
ul#flexmenu li > ul > li, 
ul#flexmenu li > ul > li.two, 
ul#flexmenu li > ul > li.three, 
ul#flexmenu li > ul > li.four { 
-webkit-align-items: center; align-items: center; 
} 

ul#flexmenu, 
ul#flexmenu li > div { 
-webkit-perspective: 1000; perspective: 1000; 
-webkit-transform: translateZ(0); transform: translateZ(0); 
-webkit-backface-visibility: hidden; backface-visibility: hidden; 
} 

ul#flexmenu, 
ul#flexmenu li > ul { 
content: 'viewport-units-buggyfill; width: 100vw; '; 
} 


li select, 
ul#flexmenu > li, 
ul#flexmenu li > div, 
ul#flexmenu li > ul { 
height: 20vh; 
} 


ul#flexmenu { 
margin: 0; 
padding: 0; 
height: 100%; 
-webkit-overflow-scrolling: touch; 
} 

ul#flexmenu > li { 
justify-content: flex-start; 
flex-grow: 0; 
flex-shrink: 0; 
width: 100vw; 
content: 'viewport-units-buggyfill; width: 100vw; height: 20vh; '; 
position: relative; 
z-index: 2; 
} 

ul#flexmenu > li.disabled { 
background: black; 
} 

ul#flexmenu li > a, 
ul#flexmenu li > span, 
ul#flexmenu li > div > a, 
ul#flexmenu li > div > span, 
ul#flexmenu li > input[type='text'], 
ul#flexmenu li > input[type='number'] { 
padding: 0 1.1em; 
text-transform: uppercase; 
color: white; 
text-decoration: none; 
font-size: 5.5vh; 
line-height: 5.5vh; 
content: 'viewport-units-buggyfill; line-height: 5.5vh; font-size: 5.5vh; '; 
} 

ul#flexmenu li > div { 
width: 100vw; 
line-height: 20vh; 
background: inherit; 
z-index: 2; /*fixforcontextmenusoitcomesontop*/ 
} 


li select { 
top: 0; 
opacity: 0; 
position: absolute; 
content: 'viewport-units-buggyfill; height: 20vh; '; 
} 

li.three > select { 
width: 33.3vw; 
content: 'viewport-units-buggyfill; width: 33.3vw; '; 
} 

ul#flexmenu li > ul { 
background: inherit; 
width: 100vw; 
} 

ul#flexmenu li > ul.col > li.two.offset { 
width: 35vw; 
content: 'viewport-units-buggyfill; width: 35vw; '; 
} 

ul#flexmenu li > ul.col > li.two.offset+li { 
width: 65vw; 
content: 'viewport-units-buggyfill; width: 65vw; '; 
} 
} 

ul#flexmenu li > ul > li { 
flex-grow: 0; 
flex-shrink: 0; 
justify-content: center; 
-webkit-justify-content: center; 
position: relative; /*fixforabsolutepositionnedelements(dropdownsinsideflexmenulis)*/ 
} 

ul#flexmenu li > ul.row > li, 
ul#flexmenu li > ul.row > li > ul.col { 
height: 10vh !important; 
content: 'viewport-units-buggyfill; height: 10vh !important; '; 
} 

ul#flexmenu li > ul.row > li span, 
ul#flexmenu li > ul.row > li a, 
ul#flexmenu li > ul.row > li input { 
padding: 0 1.4em; 
font-size: 6vw; 
line-height: 6vw; 
content: 'viewport-units-buggyfill; line-height: 6vw; font-size: 6vw; '; 
} 

li.justify-left { 
justify-content: flex-start !important; 
-webkit-justify-content: flex-start !important; 
} 

ul#flexmenu li > ul > li.two, 
ul#flexmenu li > ul > li.three, 
ul#flexmenu li > ul > li.four { 
border: 1px solid white; 
} 

ul#flexmenu li > ul > li.two { 
width: 50vw; 
content: 'viewport-units-buggyfill; width: 50vw; '; 
} 

ul#flexmenu li > ul > li.three { 
width: 33.3vw; 
content: 'viewport-units-buggyfill; width: 33.3vw; '; 
} 

ul#flexmenu li > ul > li.four { 
width: 25vw; 
content: 'viewport-units-buggyfill; width: 25vw; '; 
} 

li.two > a, 
li.two > span { 
font-size: 6vw !important; 
line-height: 6vw !important; 
content: 'viewport-units-buggyfill; line-height: 6vw!important; font-size: 6vw!important; '; 
} 

li.three > a, 
li.three > span { 
font-size: 5vw !important; 
line-height: 5vw !important; 
content: 'viewport-units-buggyfill; line-height: 5vw!important; font-size: 5vw!important; '; 
} 

li.four > a, 
li.four > span { 
font-size: 4vw !important; 
line-height: 4vw !important; 
content: 'viewport-units-buggyfill; line-height: 4vw!important; font-size: 4vw!important; '; 
} 

li.two: last-child { 
border-width: 0 !important; 
} 

li.two: first-child, 
li.three: nth-child(1), 
li.three: nth-child(2), 
li.four: nth-child(1), 
li.four: nth-child(2), 
li.four: nth-child(3) { 
border-width: 0 1px 0 0 !important; 
} 

li.three: nth-child(3), 
li.four: nth-child(4) { 
border-width: 0 0 0 0 !important; 
}