浮动在flex容器中不起作用 [英] float does not work in a flex container

问题描述

我需要页脚显示来保持 flex c $ c $。



但是，当我将它设置为 flex 时， float：right 对于span不起作用了。



< footer style =display：flex;> < span style =text-align：right; float：right;> < a> foo链接< / a> < / span>< / footer>

=https://jsfiddle.net/dhsgvxdx/ =noreferrer> https://jsfiddle.net/dhsgvxdx/

解决方案

在flex容器中， float 属性被忽略。

flexbox规范：

3。 Flex容器： flex 和 inline-flex 显示
值

flex容器为其
内容建立一个新的 flex格式化上下文。这与建立一个块格式化上下文
是一样的，除了使用了flex布局而不是块布局。

例如，浮动不会侵入flex容器，并且
flex容器的边距不会以其
内容的边距折叠。
$ b float 和 clear 不会创建浮动或清除flex项目，也不会将其流出。




相反，只需使用flex属性即可：



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

< footer> ; <跨度> < a> foo链接< / a> < / span>< / footer>

在页脚中有更多的项目，并且需要其他对齐选项，那么这里有两个指南：
$ b $ ul


在CSS Flexbox中，为什么没有justify-items和自我辩护属性？

flex-wrap如何使用align-self，align- items and align-content？

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/

解决方案

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:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
• How does flex-wrap work with align-self, align-items and align-content?

这篇关于浮动在flex容器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！