html - How to adapt div's width to content with flexbox -


i want adapt .flexrow div's width content can't set flex.

html

<div class="fullwidth">   <div class="sidebar">     <p>sidebar</p>     <p>sidebar</p>     <p>sidebar</p>     <p>sidebar</p>     <p>sidebar</p>     <p>sidebar</p>   </div>   <div class="center">     <div class="flexrow">       <div class="card">         <p>card</p>       </div>     </div>   </div> </div>

css

.center {   display: flex;   justify-content: center; }  .flexrow {   display: inline-flex;   flex-direction: row;   flex-wrap: wrap; }  .flexrow .card {   width: 300px;   height: 60px;   background-color: red;   margin: 10px;   padding: 10px;   text-align: center; }

i have created snippet here

this example of want: example

any suggestion?

the main problem here when item wrap, whether 1 use flexbox or not, container won't adjust width new content width.

with existing markup, here simple fix in 2 steps achieve that:

  1. add justify-content: center; .flexrow rule

  2. for every possible column need 1 less ghost element push elements on last row way left. added elements new .flexrow .card:empty rule magic.

    .flexrow .card:empty {   height: 0;   margin: 0 10px;   padding: 0 10px; }

updated codepen

stack snippet

.fullwidth {    background-color: grey;    display: flex;  }    .sidebar {    flex: 0 0 280px;    margin: 10px;    padding: 10px;    background-color: black;    color: white;  }    .flexrow {    display: flex;    flex-wrap: wrap;    align-content: center;    justify-content: center;  }    .flexrow .card {    width: 300px;    height: 60px;    background-color: red;    margin: 10px;    padding: 10px;    text-align: center;  }    .flexrow .card:empty {    height: 0;    margin: 0 10px;    padding: 0 10px;  }
<div class="fullwidth">    <div class="sidebar">      <p>sidebar</p>      <p>sidebar</p>      <p>sidebar</p>      <p>sidebar</p>      <p>sidebar</p>      <p>sidebar</p>    </div>    <div class="center">      <div class="flexrow">        <div class="card">          <p>card</p>        </div>        <div class="card">          <p>card</p>        </div>        <div class="card">          <p>card</p>        </div>        <div class="card">          <p>card</p>        </div>        <div class="card">          <p>card</p>        </div>        <div class="card">          <p>card</p>        </div>        <div class="card">          <p>card</p>        </div>          <!-- ghost elements, if max columns 4 1 need 3 -->        <div class="card"></div>        <div class="card"></div>        <div class="card"></div>        </div>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

python - Selenium remoteWebDriver (& SauceLabs) Firefox moseMoveTo action exception -

while performing simple hover test on firefox through selenium (3.4.0) python bindings (3.4.3) using of available os in saucelabs (except linux, latest available firefox version old), performing following actionchain: hover = actionchains(driver) hover.move_to_element(elm_men_menu).perform() it throws following error: taceback: file [...] in testhover hover.perform() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 80, in perform action() file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/common/action_chains.py", line 290, in <lambda> command.move_to, {'element': to_element.id})) file "/usr/local/lib/python2.7/dist-packages/selenium/webdriver/remote/webdriver.py", line 256, in execute self.error_handler.check_response(response) file "/usr/local/lib/python2.7/...
Read more

html - How to custom Bootstrap grid height? -

why bootstrap grid has height 591.067 ? did height came ? .main-post { padding: 20px; background-color: #fff; border: 1px solid #d8d8d8; margin-bottom: 100px; } .main-post .post-categories { margin-bottom: 10px } .main-post h3 { margin: 0 0 10px; color: #777; letter-spacing: -1px; font-weight: bold } .main-post .post-author, .main-post .post-date, .main-post .post-comments { font-size: 12px } .main-post img { display: block; margin: 10px 0; } .main-post .post-summary { line-height: 1.7; color: #888 } .main-post { color: #999 } <div class="col-sm-6"> <div class="main-post"> <h3 class="post-title"> <a href="#"> post title </a> </...
Read more

transpose - Maple isnt executing function but prints function term -

im using maple im in worksheetmode tried using maple input , 2d input , want transpose matrix a: := `<|>`(`<,>`(1, .5, -2), `<,>`(.5, 9/4+b, 5+3*b), `<,>`(-2, 5+3*b, 18+9*b+4*a)); b:= transpose(a); when exectute sheet dont translated values, there same input. matrix looks same input matrix plus function term. you can see picture in following link: why arent functions executed? meanwhile b:=a^+ doing right way , transposed matrix. other functions return function body instead needed values... if using 2d input mode (the default) space you've got between transpose , bracketed (b) interpreted multiplcation. rid of such space. also, either load package @ start of document like, with(linearalgebra): before calling transpose command package, or call it's full name like, linearalgebra:-transpose(b);
Read more