CODEWITHSUNDEEP
htmlcssflexbox
mlibre
mlibre

Reputation: 2540

float does not work in a flex container

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/

Upvotes: 74

Views: 83139

Answers (4)

user8331407
user8331407

Reputation:

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 */
}

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 372109

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:

Upvotes: 70

alanbuchanan
alanbuchanan

Reputation: 4173

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

Upvotes: 6

D.Soderberg
D.Soderberg

Reputation: 950

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>

Upvotes: 64

Related Questions