float在flex容器中不起作用

Question

float在flex容器中不起作用

mli*_*bre 41 html css html5 css3 flexbox

我想在页脚元素的右侧放置文本(foo链接).

我需要保留页脚显示flex.

但是当我把它设置为flex,float:right因为span不再起作用了.

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

Run Code Online (Sandbox Code Playgroud)

https://jsfiddle.net/dhsgvxdx/

Answer 1

Mic*_*l_B 41

floatFlex容器中将忽略该属性.

从flexbox规范:

3. Flex Containers:flex和inline-flex显示值

Flex容器为其内容建立新的flex格式上下文.这与建立块格式化上下文相同,除了使用flex布局而不是块布局.

例如,浮动不会侵入Flex容器,并且Flex容器的边距不会随其内容的边距而折叠.

float并且clear不要创建弹性物品的浮动或间隙,也不要将其带离流动.

相反,只需使用flex属性:

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

Run Code Online (Sandbox Code Playgroud)

<footer>
    <span>
       <a>foo link</a>
    </span>
</footer>

Run Code Online (Sandbox Code Playgroud)

如果页脚中有更多项目,并且需要其他对齐选项,则此处有两个指南:

这不起作用，但 margin-left: auto; 根据 @d-soderberg 的建议 (2认同)

Answer 2

小智 34

如果你margin-left: auto;像我在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>

Run Code Online (Sandbox Code Playgroud)

我知道它迟到的回复但它会帮助其他人..如果你使用`margin-left:auto`那么就不需要使用`float:right`属性......!在我的情况下它没有它工作.. (7认同)
@ShubhamJha您能否解释其背后的逻辑。 (3认同)

Answer 3

ala*_*nan 6

如果此页脚仅包含右对齐项目，则可以简单地应用于justify-content: flex-end弹性容器。这样，您就不必向其子项添加任何样式。

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

Run Code Online (Sandbox Code Playgroud)

Codepen 示例

在这种情况下，请在容器上使用 `justify-content: space- Between` - 不需要浮动或文本对齐。 (2认同)

归档时间：	9 年，3 月前
查看次数：	32723 次
最近记录：	8 年，5 月前