Question

我想在页脚元素的右侧放置文本（foo链接）。

我需要页脚显示保留flex。

但是当我将其设置为flex时，float:right for span不再适用。

＆＃13;

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

＆＃13;

https://jsfiddle.net/dhsgvxdx/

Answer 1

在Flex容器中忽略float属性。

来自flexbox规范：

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

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

例如，浮动不会侵入弹性容器，而且   flex容器的边距不会因其边缘而崩溃   内容。

float和clear不会创建弹性项目的浮动或间隙，也不会使其脱离流动。

相反，只需使用flex属性：

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

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

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

Answer 2

如果你像我在jsfiddle中所做的那样添加margin-left: auto;，它会有效：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>

Answer 3

如果此页脚仅包含右对齐项目，则只需将justify-content: flex-end应用于Flex容器即可。这样，您就不必为其子项添加任何样式。

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

Codepen example

Answer 4

默认情况下，弹性项目按源顺序排列。但是，order 属性控制它们在 flex 容器中的出现顺序。

.item {
  order: 3; /* default is 0 */
}

float在flex容器中不起作用

4 个答案: