Always wrap at least two items with flexbox

I figured out a way to do it for inline Elements, however it will behave inconsistently across browsers when used with inline-blocks. Still not a solution, but maybe somebody can figure out a way to make it behave with inline-block elements.

.item {
  display: inline;
}

.item::before {
  content: ' ';
  font-size: 0;
}

.item:last-child::before {
  content: '';
}

Here is a Fiddle with it in action.


While not the most elegant solution, you could wrap the last two elements in another flexbox:

<html>
    <head>
        <style>
            .flex {
                display: flex;
                flex-wrap: wrap;
            }
            .flex > div {
                flex: 1 0 auto;
                padding: 20px;
                text-align: center;
            }
            .flex .flex {
                padding: 0;
                flex-grow: 2;
            }
        </style>
    </head>
    <body>
        <div class="flex">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div class="flex">
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </body>
</html>

See a pen here: https://codepen.io/anon/pen/prodVd

Tags:

Css

Flexbox

Recent Posts