html - How can I wrap flexbox children so that multiple children are stacked next to another child? -


i have table-like layout using flexbox:

+--------------+---------------+-----------------+---------------+ |      1       |       2       |        3        |       4       | |              |               |                 |               | +--------------+---------------+-----------------+---------------+

as page gets smaller, i'd wrap content end this:

+--------------+-------------------------------------------------+ |              |                        2                        | |              |                                                 | |              +-------------------------------------------------+ |      1       |                        3                        | |              |                                                 | |              +-------------------------------------------------+ |              |                        4                        | |              |                                                 | +--------------+-------------------------------------------------+

i tried use flex-wrap: wrap , extend width of trailing children force them wrap, produces like:

+-----------+--------------------------------------+ |           |                   2                  | |           |                                      | |     1     +--------------------------------------+ |           | |           | +-----------+--------------------------------------+ |                        3                         | |                                                  | +--------------------------------------------------+ |                        4                         | |                                                  | +--------------------------------------------------+

this current attempt:

.container {    display: flex;    flex-wrap: wrap;  }    .controls {    flex: 0 0 25%;    max-width: 25%;    }    .name, .artist, .album {    flex: 0 0 75%;    max-width: 75%;  }    @media screen , (min-width: 600px) {      .name, .artist, .album {      flex: 0 0 25%;      max-width: 25%;    }  }
<div class="container">    <div class="controls">play</div>    <div class="name">name</div>    <div class="artist">artist</div>    <div class="album">album</div>  </div>

(jsfiddle)

i'd prefer pure css solution works in ie11+.

consider using nested flex container switches items 2, 3 , 4 column on smaller screens.

here's example based on code:

html

<div class="container">     <div class="controls">play</div>     <div class="inner-container"><!-- nested flex container -->         <div class="name">name</div>         <div class="artist">artist</div>         <div class="album">album</div>     </div> </div>

css

.container {     display: flex;     flex-wrap: wrap; }  .inner-container {     display: flex;     flex: 0 0 75%; }  .controls {     flex: 0 0 25%; }  .name, .artist, .album {     flex: 1; }  @media screen , (max-width: 600px) {      .inner-container { flex-direction: column; }      .controls { align-self: center; } }

revised fiddle


Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more