css - 优化 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 lis 等。)

 <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;
}