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;
}
}
}
}