Question

我正在尝试创建自己的网格系统。

这样做只是为了了解flex的工作原理。

我已经创建了网格OK，除了标题之外一切正常。当页面太小时，导航会在徽标下面。

如果有人知道为什么，我会喜欢它吗？

http://codepen.io/jonfuller1004/pen/PNowmE?editors=1100

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
 *,
*:before,
*:after {
  box-sizing: border-box;
}
html body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
}
h1,
h2,
h3,
h4,
h5,
p,
a,
li,
ul {
  margin: 0;
  padding: 0;
}
/* centres content of website in a width of 950px */

.container {
  width: 80%;
  margin: 0 auto;
}
/* Header styling */

header {
  background: #66b3ff;
  /*   padding: 10px; */
}
/* Logo */

#logo h1 {
  font-weight: 300;
  margin-top: 30px;
}
#logo h1 span {
  font-weight: 600;
}
/* end of Logo */

/* Nav */

nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  margin-top: 50px;
}
li {
  flex: 1;
  list-style: none;
}
a {
  text-decoration: none;
}
/* End of header styling */

/* Columns */

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8,
.col9,
.col10,
.col11,
.col12 {
  margin: 0 5px 0 5px;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.col1 {
  width: 8%;
}
.col2 {
  width: 16%;
}
.col3 {
  width: 25%;
}
.col4 {
  width: 33%;
}
.col5 {
  width: 41%;
}
.col6 {
  width: 50%;
}
.col7 {
  width: 58%;
}
.col8 {
  width: 66%;
}
.col9 {
  width: 75%;
}
.col10 {
  width: 83%;
}
.col11 {
  width: 91%;
}
.col12 {
  width: 100%;
}

<!-- Always start with html tag, followed by head and then body -->
<html5>
  <!-- In the head tag goes Stylesheet links, script info, meta tags and such -->

  <head>
    <title>Website title here</title>

  </head>
  <!-- In the body goes the actual visible content of the website   -->

  <body>

    <!--  Header and other tags like footer, section, nav, video were introduced in HTML5, these help break up the website code and become more readable  -->

    <!--  It is often useful to wrap content in a container so you can have it centred and use columns.  -->
    <header>
      <div class="container">
        <div class="row">
          <!--    row    -->

          <!--    header    -->
          <div id="logo" class="col col6">
            <h1>Bespoke<span>Design</span>Agency</h1>
          </div>
          <nav class="col col6">
            <ul>
              <!--    Navigation    -->
              <li><a href="">HOME</a>
              </li>
              <li><a href="">ABOUT</a>
              </li>
              <li><a href="">GALLERY</a>
              </li>
              <li><a href="">CONTACT</a>
              </li>
            </ul>
          </nav>
          <!--   end of Navigation    -->
        </div>

      </div>
      <!--  End of container  -->
    </header>
    <!--    end of header    -->
    <!--    end of row    -->

    <div class="container mainContentContainer">

      <!--   Website CONTENT   -->
      <div class="row">
        <!--    row    -->
        <!--    Main content    -->
        <div class="col col8" id="maincontent">
          <h1>Main Website content here</h1>
          <p>Authentic truffaut put a bird on it tacos crucifix. Kale chips craft beer austin, organic small batch salvia squid. Readymade health goth put a bird on it, yr semiotics shabby chic williamsburg selfies man braid godard. DIY blog lomo selvage.
            Pabst echo park tacos, kinfolk chicharrones thundercats farm-to-table offal twee keffiyeh affogato irony helvetica banjo. Bicycle rights XOXO irony mumblecore tofu, keffiyeh kitsch retro plaid seitan street art. Chartreuse ennui helvetica
            90's you probably haven't heard of them godard, DIY keffiyeh listicle 3 wolf moon mustache.</p>
        </div>
        <!--    end of main content    -->
        <!--    sidebar content    -->
        <div id="sidebar" class="col col4">
          <h1>side bar here</h1>
        </div>
        <!--    end of sidebar    -->
      </div>
      <!--    end of row   -->

      <div class="row">
        <footer class="col col12">
          <h1>footer content</h1>
        </footer>
      </div>


    </div>
    <!--    end of container    -->
  </body>
  <!--    end of body    -->

  </html>
  <!--    end of html    -->

Answer 1

导航在较小屏幕上使用徽标的原因是您在弹性项目上使用百分比宽度。

在标题展示广告容器（.row）中，您有两个展示项（div.col6和nav.col6）。在这两个项目上都应用了此规则：

.col6 { width: 50%; }

您的商品符合所有尺寸的规则。这意味着在较小的屏幕上它们会重叠。

请改为尝试：

.col6 { flex: 1; }

现在两个弹性项目将共享可用空间，但不会重叠。

Revised Codepen

Answer 2

您应该允许此行换行并使用flex来覆盖宽度值：

.row {
  display: flex;
 /* flex-direction: row; this is default */
}
header .row {
  flex-wrap: wrap;/* default is no wrap ! */
}
header nav, header #logo {
  flex:1;
}

http://codepen.io/gcyrillus/pen/grOPpR?editors=1100

我正在创建的Flexbox网格在页面太小时会中断

2 个答案: