Efficient Way to Place Orphaned Element(S) at Top/Beginning Using CSS Flexbox

Efficient way to place orphaned element(s) at top/beginning using CSS flexbox

Assuming you want to get rid of the nth-child CSS rule listing, there is no 1-liner that does that.

If you generate the items dynamically, you could add the order property inline, and if you don't know in advance how many items, you could start from a value that you for sure never exceed, i.e. 1000 and then go downwards.

Stack snippet

ul#subcategory_list {  list-style-type: none;  display: flex;  flex-wrap: wrap-reverse;  flex-direction: row-reverse;}
ul#subcategory_list li {  flex: 1 1 25%;  border: 1px solid gray;  box-sizing: border-box;}

<ul id="subcategory_list">  <li style="order: 1000">1</li>  <li style="order: 999">2</li>  <li style="order: 998">3</li>  <li style="order: 997">4</li>  <li style="order: 996">5</li>  <li style="order: 995">6</li></ul>

Stretch flex first row items equally other than last items

Reorder the years list (usually it's not difficult)
Rotate .inn-wrap to 180deg
Rotate each children of .inn-wrap to 180deg

I've added resizable container to check the responsiveness.

#resize {width:340px; padding:20px; border:solid 1px; resize:both; overflow:auto}

.wrap {  min-width: 100px;  margin: 30px auto;  background-color: #000;  padding: 15px;  margin-bottom: 20px;}
.inn-wrap {  width: 100%;  display: flex;  flex-wrap: wrap;  transform:rotate(180deg);}
.inn-wrap > a {  flex: 1 1 auto;  text-align: center;  transform:rotate(180deg);}
.year {  display: inline-block;  margin: 5px 5px;  padding: 5px 15px;  background-color: #fff;  text-decoration: none;  color: #000;  font-size: 16px;  font-weight: 600;}

<div id="resize">Resize me!
<div class="wrap">  <div class="inn-wrap">    <a href="/articles/2011" class="year">2009</a>    <a href="/articles/2011" class="year">2010</a>    <a href="/articles/2011" class="year">2011</a>    <a href="/articles/2012" class="year">2012</a>    <a href="/articles/2013" class="year">2013</a>    <a href="/articles/2014" class="year">2014</a>    <a href="/articles/2015" class="year">2015</a>    <a href="/articles/2016" class="year">2016</a>    <a href="/articles/2017" class="year">2017</a>    <a href="/articles/2018" class="year">2018</a>  </div></div>
</div>

Reorder HTML elements - most efficient vs practical way

Alright, did some test at https://jsbench.me/2pkzlbj45h.

Ordering elements using CSS order can be from 20% slower to 40% faster than ordering by dom manipulation depending on whether the starting order is fully random or almost sorted (0,5% of elements out of order).

The more random the starting order is, the more it benefits CSS order.

Flexbox full reverse

Update

Because this uses flex-wrap: wrap-reverse, the last element in the DOM order is still treated by flexbox as the last element to "fit in" to the flexbox schema. The wrap-reverse just means that elements are wrapped above previous ones instead of below. Basically, to have the first row filled with non "flex-growed" items with pure CSS is not possible. The below solution works because flex-grow allows the last element to take up the empty space.

Another option would be to make sure you always have the proper number of elements to make sure that the last (rendered on top) line is always full, like so:

#news {  display: flex;  flex-flow: row-reverse wrap-reverse;  justify-content: space-around;  width: 270px;}
.report {  height: 50px;  width: 70px;  background-color: yellow;  margin: 5px;  flex: auto;}

<div id="news">  <div class="report">Other report</div>  <div class="report">Other report</div>  <div class="report">Other report</div>  <div class="report">Other report</div>  <div class="report">Other report</div>  <div class="report">Other report</div>  <div class="report">Other report</div>  <div class="report">2 mins old</div>  <div class="report">The new one</div></div>

How can I have two rows of uneven, centered elements with flexbox?

UPDATE scale illustrating

We use css variables, such as --margin-right-value, --row-elements-number
We use classes form .boxes2 to .boxes20 to define different behavior of rows with different element numbers.
We wrap our .boxes<number> classes to simplify css, we match classes starting with boxes inside wrapper, optionaly, can maintain without wrapper.
Of course margin-top (can be used as variable as well if needed) and --margin-right-value can be specified within every .boxes<number> class.

Once written, can use classes after where you want.

Look into the snippet. Or https://jsfiddle.net/beluginni/kb8L71c3/

.wrapper [class*="boxes"] {  margin-bottom: 30px; /* to separate visualy*/}
:root {  --margin-right-value: 10px; /* margin between elements in row, can be specified within each of boxes<n> classes */}
.boxes2 { --row-elements-number: 2; }.boxes3 { --row-elements-number: 3; }.boxes4 { --row-elements-number: 4; }.boxes5 { --row-elements-number: 5; }.boxes6 { --row-elements-number: 6; }.boxes7 { --row-elements-number: 7; }.boxes8 { --row-elements-number: 8; }.boxes9 { --row-elements-number: 9; }.boxes10 { --row-elements-number: 10; }.boxes11 { --row-elements-number: 11; }.boxes12 { --row-elements-number: 12; }.boxes13 { --row-elements-number: 13; }.boxes14 { --row-elements-number: 14; }.boxes15 { --row-elements-number: 15; }.boxes16 { --row-elements-number: 16; }.boxes17 { --row-elements-number: 17; }.boxes18 { --row-elements-number: 18; }.boxes19 { --row-elements-number: 19; }.boxes20 { --row-elements-number: 20; }

.wrapper [class*="boxes"] {  display: flex;  flex-wrap: wrap;  justify-content: center;  outline: dotted red 1px;}

/*width: calc((100% - (<margin_value> * (<row_el_number> - 1))) / <row_el_number>)*/.box {  width: calc((100% - (var(--margin-right-value) * (var(--row-elements-number) - 1))) / var(--row-elements-number));  height: 100px;  box-shadow: 0 0 10px black inset;  background: green;}
.boxes2 .box:nth-child(n+3),.boxes3 .box:nth-child(n+4),.boxes4 .box:nth-child(n+5),.boxes5 .box:nth-child(n+6),.boxes6 .box:nth-child(n+7),.boxes7 .box:nth-child(n+8),.boxes8 .box:nth-child(n+9),.boxes9 .box:nth-child(n+10),.boxes10 .box:nth-child(n+11),.boxes11 .box:nth-child(n+12),.boxes12 .box:nth-child(n+13),.boxes13 .box:nth-child(n+14),.boxes14 .box:nth-child(n+15),.boxes15 .box:nth-child(n+16),.boxes16 .box:nth-child(n+17),.boxes17 .box:nth-child(n+18),.boxes18 .box:nth-child(n+19),.boxes19 .box:nth-child(n+20),.boxes20 .box:nth-child(n+21) {  margin-top: 4%; /* margin between rows, can be represented as var and specified within each of boxes<n> classes */}
.boxes2 .box:not(:nth-child(2n)):not(:last-child),.boxes3 .box:not(:nth-child(3n)):not(:last-child),.boxes4 .box:not(:nth-child(4n)):not(:last-child),.boxes5 .box:not(:nth-child(5n)):not(:last-child),.boxes6 .box:not(:nth-child(6n)):not(:last-child),.boxes7 .box:not(:nth-child(7n)):not(:last-child),.boxes8 .box:not(:nth-child(8n)):not(:last-child),.boxes9 .box:not(:nth-child(9n)):not(:last-child),.boxes10 .box:not(:nth-child(10n)):not(:last-child),.boxes11 .box:not(:nth-child(11n)):not(:last-child),.boxes12 .box:not(:nth-child(12n)):not(:last-child),.boxes13 .box:not(:nth-child(13n)):not(:last-child),.boxes14 .box:not(:nth-child(14n)):not(:last-child),.boxes15 .box:not(:nth-child(15n)):not(:last-child),.boxes16 .box:not(:nth-child(16n)):not(:last-child),.boxes17 .box:not(:nth-child(17n)):not(:last-child),.boxes18 .box:not(:nth-child(18n)):not(:last-child),.boxes19 .box:not(:nth-child(19n)):not(:last-child),.boxes20 .box:not(:nth-child(20n)):not(:last-child) {  margin-right: var(--margin-right-value);}

<div class="wrapper">  <div class="boxes2">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes3">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>
  <div class="boxes4">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>
  <div class="boxes5">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes6">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes7">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes8">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes9">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes10">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes11">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes12">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes13">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes14">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes15">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes16">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes17">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes18">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes19">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>    <div class="boxes20">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div></div>

How to center elements on the last row in CSS Grid?

CSS Grid isn't suited for alignment across an entire row because of crisscrossing tracks blocking the way. Here's a detailed explanation:

Aligning grid items across the entire row/column (like flex items can)

As an alternative, use flexbox with justify-content: center.

This packs all items in the horizontal center of the row. Then your margins push them apart.

On fully-filled rows, justify-content will have no effect since there's no free space for it to work.

On rows with free space (in your case, only the last row), the items are centered.

#container {  display: flex;  flex-wrap: wrap;  justify-content: center;}
.item {  flex: 0 0 calc(16.66% - 20px);  background: teal;  color: white;  padding: 20px;  margin: 10px;}
* {  box-sizing: border-box;}

<div id="container">  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div>  <div class="item">Item</div></div>

Flex-box: Align last row to grid

Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

How to display wrapping flex items as space-between with last row aligned left?

After trying the suggestions here (thanks!) and searching the web long and wide, I've reached the conclusion that this is simply not possible with flexbox. Any by that I mean that others have reached this conclusion while I stubbornly tried to make it work anyway, until finally giving up and accepting the wisdom of wiser people.

There are a couple of links I came across that might explain it better, or different aspects of the requirements, so I'm posting them here for... posterity.

How to keep wrapped flex-items the same width as the elements on the previous row?

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

css - min height by number of lines

You should use a clearfix hack

It will allow you to get your divs aligned without specifying any height. It's like a line separator :

=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          amet, consectetur
adipiscing elit.           =====================      =====================
=====================      
{clearfix}
=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          =====================
=====================      adipiscing elit.
                           =====================

You still can set height / margin on each div, of course :

EDIT :

For an internal equal size without using tables, you've got several solutions :

Using overflow:hidden on the parent and an extra margin-bottom on children if you only use background.

Using display-table attribute (Method 1)

Or using javascript (Method 3)

Efficient Way to Place Orphaned Element(S) at Top/Beginning Using CSS Flexbox