sass - multi-nested css flex does not flex properly -

-

i'm doing mockup using html , scss (or sass?). goal have page > container > [header + article container] articles displayed in grid.

i have tossed out div-nade , let shrapnel of div#id land may, instead decided use css flex , having problems. know , understand properties , parameters, can't seem them right.

how make there's limited number of items per row , and wraps next row?

here's pen: http://codepen.io/monsto/pen/ekazm

here's 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 bar</header>           <p></p>          <p></p>          <p></p>          <p></p>         </div>       </article>  <!-- copy <article> many times samples -->     </section>   </div> </body>

and sass (or scss?). commented stuff troubleshoot.

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


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more