javascript - Nested flexboxes and items alignment -


i'm trying create own small grid system based on css3 flex display. have following classes:

  • a grid class, flex container flex-direction set column.
  • a row class, flex container flex-direction set row.
  • set of column classes of different flex-basis sizes.

what want able align each row left/center/right setting self-align property of row element. however, whenever try it, things seem go bad.

here plunker demonstrate it: http://plnkr.co/edit/mhos7u28gcbjupvi7ikj?p=preview

html 

  <!-- first row -->   <div class="row align-end"> <!-- try remove 'align-end' here -->     <div class="column-1">       <div class="item">1</div>     </div>      <div class="column-1">       <div class="item">2</div>     </div>   </div>    <!-- second row -->   <div class="row">     <div class="column-1">       <div class="item">3</div>     </div>      <div class="column-2">       <div class="item">4</div>     </div>   </div>  </div>

css

* {   box-sizing: border-box; }  .grid {   display: flex;   flex-direction: column; }  .row {   display: flex;   flex-direction: row; }  .column-1 {   flex-basis: 33.33%;   padding: 10px; }  .column-2 {   flex-basis: 66.67%;   padding: 10px; }  .column-3 {   flex-basis: 100%;   padding: 10px; }  .align-start {   align-self: flex-start; }  .align-center {   align-self: center; }  .align-end {   align-self: flex-end; }  .item {   background-color: lightblue;   font-family: "arial";   text-align: center;   padding: 4px; }

as can see, in plunker set grid 2 rows, 2 columns in each row. 2 columns in first row have width of 33.33% (flex-basis). in second row, first column's width 66.67% , second column 33.33%. now, since first row has unused space, want try align right (for whatever reason). therefore, add div represents first row class align-end, adds property align-self: flex-end; element. can see, doing first row looks bad, both columns aligned right, width totally corrupted (you can try , remove class 'align-end' first row, , things normal).

what missing? why row doesn't align correctly right?

thanks, roy.

the property controls how children aligned along main axis justify-content

.align-end {     justify-content: flex-end; }

plunker


Comments

Post a Comment

Popular posts from this blog

shopping cart - Page redirect not working PHP -

im trying redirect user when click "empty cart". redirect working "add cart" not "empty cart". ideas great. in main .php file set current url seen $current_url = base64_encode("http://$_server[http_host]$_server[request_uri]"); then below cartaction.php file handles actions such "add cart" , "empty cart" <?php session_start(); include_once 'config.php'; //add item in shopping cart if(isset($_post["add"])) { $product_id = $_post["product_id"]; //product id $return_url = base64_decode($_post["return_url"]); //return url $qty = $_post["qty"]; $product = $mysqli->query("select product_name, unit_price, unit_quantity products product_id = '$product_id'"); $obj = $product->fetch_object(); if(!isset($_session['products'])) { $_session['products'] = array(); } if(array_key_exists($product_id...
Read more

php - How to modify a menu to show sub-menus -

i have custom php menu made person, displays categories menu. however, need display subcategories well. tried adding hierarchical parameter didn't work. hoping assistance! here code: <ul> <?php /* categories wp e-commerce products */ $wpec_product_categories = get_terms( 'wpsc_product_category', 'hide_empty=0&parent=0&exclude=298'); $myarray = array(); foreach($wpec_product_categories $wpec_categories){ $myarray[$wpec_categories->term_id]['name'] = $wpec_categories->name; $myarray[$wpec_categories->term_id]['slug'] = $wpec_categories->slug; $myarray[$wpec_categories->term_id]['term_id'] = $wpec_categories->term_id; } foreach($myarray $wpec_categories1){ $wpec_term_name = $wpec_categories1['name']; $wpec_term_slug = $wpec_categories1['slug']; $wpec_term_id = $wpec_categories1['term_id']; echo '<li> <a href="'.get_page_link(19)....
Read more

python - Installing PyDev in eclipse is failed -

unable read repository @ http://pydev.sf.net/updates/content.xml. sun.security.validator.validatorexception: pkix path building failed: sun.security.provider.certpath.suncertpathbuilderexception: unable find valid certification path requested target i installing pydev in eclipse using python, doesn't install successfully. gives above error. happened? how solve error? i had error when trying install on laptop behind corporate firewall. couldn't tell setup of firewall, not sure of root cause. i got passed error installing pydev eclipse when out behind firewall. another way got around have eclipse on non-firewalled machine, install pydev eclipse, , copy whole eclipse directory non-firewalled machine firewalled machine. there better way, , way fix properly, didn't have time work out firewall doing. this on windows 7 machine (yeah know) not work *nix versions installed through package manager yum or apt.
Read more