0

我正在使用 html 和 SCSS（或者它是 SASS？）做一个模型。目标是让页面 > 容器 > [标题 + 文章容器] 文章在网格中显示。

我本可以扔掉一个 div-nade 并让 div#id 的弹片落在它可能的位置，但是我决定使用 css flex 并且我遇到了问题。我知道并理解属性及其参数，但我似乎无法将它们正确组合在一起。

我该如何做才能使每行的项目数量有限，然后换行到下一行？

这是我的笔：http ://codepen.io/monsto/pen/ekazm

这是html：

<body>  Body FLEX
  <div class="main">    .main
    <header class="header">      .header      <nav>        Nav      </nav>    </header>
    <section class="pack">      section
      <article class="item text">        article
        <div class="item-content">
          <header class="entrytitle">a guy walks into a bar</header>
          <p></p>          <p></p>          <p></p>          <p></p>
        </div>
      </article>  <!-- copy <article> however many times for samples -->
    </section>
  </div>
</body>

还有 SASS（或者是 SCSS？）。评论的东西基本上是为了解决问题。

$bg: #eec;
$bord: #aaa;

@mixin colorize {
  $bg: darken($bg,8%);
  background-color: $bg;
  $bord: darken($bord,10%);
  border-color: $bord;
}

@mixin flex-spec
{
  display: flex;
  //flex: 1;
  flex-flow: row wrap;
  justify-content: space-between;
}

* {box-sizing: border-box;}

html {  z-index: -10;
}

/*body {
  border:none; 
  background-color: #444;
  overflow: auto;
}*/

body * {
  // affects all children of body
  font: bold 16px arial;
  border-radius: 8px;
  // flex: 1;
  border: 5px solid $bord;
  @include colorize;
  //margin: 4px; padding: 0px;
}

div.main {
  @include colorize;
  margin: 0; padding: 0;

  header.header {
    @include colorize;
    nav {
      @include colorize;
    }
  }

  section {
    @include colorize;
    padding: 2px;
    article {
      @include colorize;
      * {border: none; border-radius: 1px;}
      div.item-content {
        @include colorize;
        border: 1px solid white;
        //margin: 0;
        header {//margin: 0;
          @include colorize;
        }
        p {height: 10px; margin: 0 0 10px;}
      }
      &.embiggen {
        align-items: stretch;
        background: #ffb; border-color: black; 
        height: 394px; width: 100%; margin: 0px; padding: 0px;
        position: relative; z-index: 10;
      }
    }
  }
}
4

0 回答 0