0

I'm new to flexbox and CSS. I'd like to know if there is any way to optimize this structure.. It works but looks real messy.

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

Sample Usage: (This varies alot, sometimes we have other nested ul lis etc..)

 <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/

Thanks.

2
  • Can you post related html?
    – Varinder
    Jan 18, 2015 at 21:14
  • related html is not always the same but i'll post a sample :) Jan 18, 2015 at 21:21

1 Answer 1

1

Perhaps, something like this (at least to start with):

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.