Question

在我的chrome v46 1366分辨率中第一次尝试开箱即用flexboxgrid时，我创建的示例菜单似乎是垂直堆叠而不是水平堆叠，因为flex布局应该是。但是，当您在jsfiddle中试用代码时，它似乎没问题。我认为它与容器宽度有关？我该如何解决？

这是fiddle:

HTML：

<div class="container">
    <div class="row center-xs middle-xs">
        <div class="col-sm-2 col-xs-4">
             <h1><a href="#">My Logo</a></h1>

        </div>
        <div class="col-sm-8 col-sm-offset-2 col-xs-12">
            <nav>
                <ul class="row">
                    <li class="col-xs"><a href="#">Home</a>
                    </li>
                    <li class="col-xs"><a href="#">About</a>
                    </li>
                    <li class="col-xs"><a href="#">Menu</a>
                    </li>
                    <li class="col-xs"><a href="#">News</a>
                    </li>
                    <li class="col-xs"><a href="#">Photo</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    <!--end of .row-->
     <h2>A flexible menu based on the 
  <a href="http://flexboxgrid.com/" target="_blank">Flexbox Grid</a> framework.
</h2>

    <p class="p">Demo by George Martsoukos. <a href="http://www.sitepoint.com/3-modern-tools-using-flexbox-grids" target="_blank">See article</a>.</p>
</div>

CSS：

body {
    /*            display: flex;*/
    /*            flex-direction: column;*/
    background: #4c493e;
    color: white;
    padding-top: 10px;
}
h1, ul, li {
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    color: black;
    text-decoration: none;
}
.p {
    text-align: center;
    color: white;
    padding-top: 150px;
    font-size: .9em;
}
.p a {
    color: white;
    text-decoration: underline;
}
/* LOGO STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
    margin-left: 5px;
    padding: 10px;
    font-size: 24px;
    background: #ffee91;
}
h1 a {
    display: block;
}
/* MENU STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
div.row {
    min-height: 80px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
}
.col-xs {
    padding: 0;
    border-right: solid 1px #444;
}
nav {
    margin-right: 5px;
}
ul a {
    display: block;
    padding: 15px 0;
    text-transform: uppercase;
    background: #fff0a0;
    transition: background .3s ease;
}
ul a:before {
    font-family: FontAwesome;
    padding-right: 5px;
    font-size: 22px;
    display: inline-block;
}
ul li:nth-child(1) a:before {
    content:'\f015';
}
ul li:nth-child(2) a:before {
    content:'\f0eb';
}
ul li:nth-child(3) a:before {
    content:'\f115';
}
ul li:nth-child(4) a:before {
    content:'\f1ea';
}
ul li:nth-child(5) a:before {
    content:'\f03e';
}
ul a:hover {
    background: white;
}
/* SECOND LINE STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h2 {
    text-align: center;
    padding: 5px;
}
h2 a {
    padding: 5px;
    border-bottom: 2px solid #FEB41C;
    transition: all .3s ease;
    color: white;
}
h2 a:hover {
    background: #FEB41C;
    color: black;
}
/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 876px) {
    nav {
        margin: 0 5px;
    }
    div.row {
        height: auto;
    }
    h1 {
        font-size: 18px;
    }
    h1, ul {
        margin: 20px 0;
    }
    ul a {
        font-size: 0;
    }
    ul a:before {
        padding: 0 5px;
        font-size: 32px;
    }
}
@media screen and (max-width: 500px) {
    ul a:before {
        font-size: 22px;
    }
}
@media screen and (min-width: 1600px) {
    .col-sm-offset-2 {
        margin-left: 16.666%;
    }
}
@media screen and (min-width: 1600px) {
    .col-sm-offset-2 {
        margin-left: 16.666%;
    }
}

以下是我浏览器中的图片：

Flexbox网格容器

0 个答案: