CSS Flexbox horizontal groups; all left except one right

Question

Here is my HTML:

<header>
<div class="set">
<div class="set">
<div class="set">
<div class="set">
<div class="set">
<span>123</span>
</header>

How do I effectively use CSS Flex to make all the header > div elements effectively float: left; while making the header > span element effectively float: right; while keeping it on the same main axis?

Float and flex are two different things. Can we have a look at your code to be able to answer you ? — Relisora, Jul 15 '16 at 11:21

Paulie_D · Answer 1 · 2016-07-15T11:49:00.323

With margin-left:auto on the "right" span.

header {
  display: flex;
  align-items: center;
  background: grey;
}
.set {
  height: 75px;
  flex: 0 0 50px;
  background: blue;
  margin: 1em;
}
.right {
  margin-left: auto;
  background: pink;
  padding: 1em;
}

<header>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <div class="set"></div>
  <span class="right">123</span>
</header>

score 2 · Accepted Answer · answered Jul 15 '16 at 11:33

2

header
{
 display: flex;
}

header > div
{
 margin-right: auto;
}

header > span
{
 margin-left: auto;
}

https://jsfiddle.net/j5ffw1L7/

answered Jul 15 '16 at 11:33

John

1
13
98
177

CSS Flexbox horizontal groups; all left except one right

2 Answers2