71

I want to position text (foo link) in right of the footer element.

I need footer display to remain flex.

But when I set it to flex, float:right for span doesn't work anymore. 

<footer style="display: flex;">
     <span style="text-align: right;float: right;">
        <a>foo link</a>
     </span>
</footer>

https://jsfiddle.net/dhsgvxdx/

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
mlibre
  • 2,460
  • 3
  • 23
  • 32
  • 1
    See [Which css rules are ignored when flexbox is active?](http://stackoverflow.com/q/30500734/1529630) – Oriol Aug 28 '16 at 19:15

4 Answers4

68

The float property is ignored in a flex container.

From the flexbox specification:

3. Flex Containers: the flex and inline-flex display values

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.

For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.

Instead, just use flex properties:

footer {
    display: flex;
    justify-content: flex-end;
}
<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

If you have more items in the footer, and need other alignment options, then here are two guides:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
60

It works if you add margin-left: auto; like I did here in the jsfiddle: https://jsfiddle.net/dhsgvxdx/3/

<body>
    <footer style="display: flex;">
        <span style="text-align: right;float: right; margin-left: auto;">
            <a>foo link</a>
        </span>
    </footer>
</body>
D.Soderberg
  • 910
  • 5
  • 11
  • 13
    I know its late reply but it will help others.. If you use `margin-left: auto` then no need to use `float: right` property....! In my case it worked without it.. –  Jul 07 '17 at 13:08
  • 5
    @ShubhamJha Could you please explain the logic behind it. – Aniket Nandan Jun 12 '18 at 15:48
  • The float:right and text-align:right are both unnecessary. The margin-left:auto does the trick. Great idea D.Soderberg – keithphw May 07 '20 at 05:30
6

If this footer is only to contain a right-aligned item, you can simply apply justify-content: flex-end to the flex container. This way, you do not have to add any styles to its children.

footer {
  display: flex;
  justify-content: flex-end;
}

Codepen example

alanbuchanan
  • 3,993
  • 7
  • 41
  • 64
  • yes. i try it. it works for some cases. but in my case, i have some element that need to be in left of the footer. and some in right. – mlibre Aug 28 '16 at 18:57
  • 2
    In that case, use `justify-content: space-between` on the container - no need for floats or text-aligns. – alanbuchanan Aug 28 '16 at 18:58
  • hmmm. i test it. this is so good. by this way, elements automatically aligned. tnx – mlibre Aug 28 '16 at 19:04
2

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

.item {
  order: 3; /* default is 0 */
}
  • I was struggling to break a flex component from the middle to a line below it's siblings while retaining the flex behavior of the siblings -- this solution worked perfectly for me. Thank you! – Drew Jan 06 '21 at 23:42