当flexbox不可用时，中心菜单项回退

时间：2018-01-28 17:25:20

标签： html css

我所拥有的代码将显示可用菜单项的空间，并在每个项目中水平和垂直居中。

这是通过菜单项的包装器实现的：

std::cout << static_cast<void*>(p) << std::endl;

关于每个项目：

.gel-layout {
    list-style: none;
    direction: ltr;
    text-align: left;
    display: flex;
    flex-flow: row wrap;
    flex-grow: 1;
    margin-right: 0;
    margin-left: -8px;
    padding-right: 0;
    padding-left: 0;
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
}

.gel-layout--middle {
    align-items: center;
}

是否可以为不支持flexbox的浏览器实现相同的效果？

.gel-layout__item {
    width: 100%;
    display: inline-block;
    padding-left: 8px;
    text-align: left;
    vertical-align: top;
    box-sizing: border-box;
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: auto;
}

.gel-layout--fit > .gel-layout__item {
    width: auto;
    flex: 1 1 auto;
}

.gel-layout--equal > .gel-layout__item {
    display: flex;
}

.gel-layout--middle > .gel-layout__item {
    vertical-align: middle;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

html,
body {
  background-color: #000000;
  color: #ffffff;
  margin: 0 auto;
  line-height: 1;
  height: 100%;
  text-rendering: optimizeSpeed;
}

body {
  font-size: 160%;
  margin: 0;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* autoprefixer: off */


/**
     * Grid containing element
     */

a {
  color: #fff;
}

path {
  fill: #ffffff;
}

.menu__container:after {
  content: '';
  display: table;
  clear: both;
}

.menu__container ul li {
  display: inline-block;
  vertical-align: middle;
}

.menu__container ul li a {
  padding-left: 1rem;
}

.gel-wrap {
  max-width: 1008px;
  margin: 0 auto;
  padding-right: 8px;
  padding-left: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 80em) {
  .gel-wrap {
    max-width: 1280px;
  }
}


/**
     * A grid row
     */

.gel-layout {
  list-style: none;
  direction: ltr;
  text-align: left;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  margin-right: 0;
  margin-left: -8px;
  padding-right: 0;
  padding-left: 0;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

@media (min-width: 37.5em) {
  .gel-layout {
    margin-left: -16px;
  }
}

.opera-only:-o-prefocus,
.gel-layout {
  word-spacing: -0.43em;
}


/**
     * A single grid item
     */

.gel-layout__item {
  width: 100%;
  display: inline-block;
  padding-left: 8px;
  text-align: left;
  vertical-align: top;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}

@media (min-width: 37.5em) {
  .gel-layout__item {
    padding-left: 16px;
  }
}


/**
     * Layouts with no gutters.
     */

.gel-layout--flush {
  margin-left: 0;
}

.gel-layout--flush>.gel-layout__item {
  padding-left: 0;
}


/**
     * Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
     * markup will display in order 4, 3, 2, 1 on your page
     */

.gel-layout--rev {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.no-flexbox .gel-layout--rev {
  direction: rtl;
  text-align: left;
}

.no-flexbox .gel-layout--rev>.gel-layout__item {
  direction: ltr;
  text-align: left;
}


/**
     * Align layout items to the vertical centers of each other
     */

.gel-layout--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

.gel-layout--middle>.gel-layout__item {
  vertical-align: middle;
}


.gel-layout--center {
  text-align: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.gel-layout--auto>.gel-layout__item {
  width: auto;
}


.gel-layout--no-flex {
  min-width: 100%;
}

.gel-layout--no-flex,
.gel-layout--no-flex>.gel-layout__item {
  display: block;
  display: inline-block;
}


.gel-layout--equal>.gel-layout__item {
  display: -webkit-flex;
  display: flex;
}


/**
         * Allow items to devide the space equally between the number of items
         */

.gel-layout--fit>.gel-layout__item {
  width: auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
}


/**
         * Align a single grid item to the top
         */

.gel-layout__item--top {
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
}


/**
         * Align a single grid item to the center
         */

.gel-layout__item--center {
  -webkit-align-self: center;
  -ms-flex-item-align: center;
  align-self: center;
}


/**
         * Align a single grid item to the bottom
         */

.gel-layout__item--bottom {
  -webkit-align-self: flex-end;
  -ms-flex-item-align: end;
  align-self: flex-end;
}

.gel-layout--middle {
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

1 个答案:

答案 0 :(得分：0)

CSS表可以做到这一点：

＆＃13;
＆＃13; 
html {
  box-sizing: border-box;
  font-size: 62.5%;
}

html,
body {
  background-color: #000000;
  color: #ffffff;
  margin: 0 auto;
  line-height: 1;
  height: 100%;
  text-rendering: optimizeSpeed;
}

body {
  font-size: 160%;
  margin: 0;
  text-rendering: optimizeLegibility;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}


/* autoprefixer: off */


/**
     * Grid containing element
     */

a {
  color: #fff;
}

path {
  fill: #ffffff;
}

.menu__container:after {
  content: '';
  display: table;
  clear: both;
}

.menu__container ul li {
  display: inline-block;
  vertical-align: middle;
}

.menu__container ul li a {
  padding-left: 1rem;
}

.gel-wrap {
  max-width: 1008px;
  margin: 0 auto;
  padding-right: 8px;
  padding-left: 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media (min-width: 25em) {
  .gel-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 80em) {
  .gel-wrap {
    max-width: 1280px;
  }
}


/**
     * A grid row
     */

.gel-layout {
  list-style: none;
  direction: ltr;
  display: table;
  table-layout: fixed;
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  letter-spacing: -0.31em;
  text-rendering: optimizespeed;
}

.gel-layout__item {
  display: table-cell;
  padding-left: 8px;
  text-align: left;
  vertical-align: middle;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  letter-spacing: normal;
  word-spacing: normal;
  text-rendering: auto;
}
＆＃13; 
<nav class="menu__container">
  <div class="gel-wrap">
    <div class="gel-layout gel-layout--middle gel-layout--equal gel-layout--fit">
      <div class="gel-layout__item      ">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                  <path d="M20 0 L40 20 L20 40 L0 20"></path>
                </svg>
      </div>
      <div class="gel-layout__item      "><a href="/">Home</a></div>
      <div class="gel-layout__item      "><a href="/oss">OSS</a></div>
      <div class="gel-layout__item      "><a href="/blog">Blog</a></div>
      <div class="gel-layout__item      "><a href="/privacy-policy">Privacy Policy</a></div>
    </div>
  </div>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题