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