Exclude First Flex Item From Wrap

I have a footer which is a flex container. It contains a logo image and four text elements after, totaling five flex items which are centred horizontally in the window, allowing an

Solution 1:

The main problem here, with the existing markup is, as soon as the item 4 an 5 break line, they will go to a row of their own, and there is no Flexbox properties to make them bump up as you want (like float'd element would).

With CSS Grid you would be able to do this though, but it also has less browser support than Flexbox does.

The simplest and best Flexbox solution here is to wrap the 2-5 items. With this you will avoid any limits that fixed height's, absolute positioning, etc. can cause if to keep the existing markup, and get a fully dynamic, responsive solution.

Stack snippet

footer {
    max-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
footer .footer-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0 10px;
}
footer .footer-flex .flex-item {
    margin-left: 10px;
}

/* styles for this demo */
footer {
    border: 1px solid red;
}
footer + footer {
    max-width: 400px;
}
footer .footer-flex .flex-item {
    padding: 10px;
    border: 1px solid red;
}

<footer>
    <a class='flex-item'><img src="http://placehold.it/100" alt=""></a>
    <div class='footer-flex'>
      <a class='flex-item'>Two</a>
      <a class='flex-item'>Three</a>
      <a class='flex-item'>Four</a>
      <a class='flex-item'>Five</a>
    </div>
</footer>

Wider footer

<footer>
    <a class='flex-item'><img src="http://placehold.it/100" alt=""></a>
    <div class='footer-flex'>
      <a class='flex-item'>Two</a>
      <a class='flex-item'>Three</a>
      <a class='flex-item'>Four</a>
      <a class='flex-item'>Five</a>
    </div>
</footer>