浮动在弹性容器中不起作用
Posted
技术标签:
【中文标题】浮动在弹性容器中不起作用【英文标题】：float does not work in a flex container 【发布时间】：2017-01-04 19:10:21 【问题描述】：我想将文本（foo 链接）放置在页脚元素的右侧。
我需要页脚显示以保持flex。
但是当我将其设置为flex 时，float:right for span 不再起作用。
<footer style="display: flex;">
<span style="text-align: right;float: right;">
<a>foo link</a>
</span>
</footer>https://jsfiddle.net/dhsgvxdx/
【问题讨论】：
见Which css rules are ignored when flexbox is active? 【参考方案1】：默认情况下，弹性项目按源顺序排列。但是，order 属性控制它们在弹性容器中出现的顺序。
.item
order: 3; /* default is 0 */
【讨论】：
我正在努力将 flex 组件从中间断开到其兄弟姐妹下方的一行，同时保留兄弟姐妹的 flex 行为——这个解决方案对我来说非常有效。谢谢！【参考方案2】：float 属性在弹性容器中被忽略。
来自 flexbox 规范：
3. Flex Containers: the
flexandinline-flexdisplay valuesflex 容器为其创建一个新的 flex 格式化上下文 内容。这与建立块格式化上下文相同， 除了使用 flex 布局而不是块布局。
例如，浮动不会侵入 flex 容器，并且 flex 容器的边距不会随着它的边距折叠 内容。
float和clear不会创建 flex item 的浮动或清除，也不要使其脱离流动。
相反，只需使用 flex 属性：
footer
display: flex;
justify-content: flex-end;
<footer>
<span>
<a>foo link</a>
</span>
</footer>如果您在页脚中有更多项目，并且需要其他对齐选项，那么这里有两个指南：
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?【讨论】：
这没用，但是margin-left: auto;来自@d-soderberg 的建议确实【参考方案3】：如果此页脚仅包含右对齐项，您可以简单地将justify-content: flex-end 应用于 flex 容器。这样，您不必为其子项添加任何样式。
footer
display: flex;
justify-content: flex-end;
Codepen example
【讨论】：
是的。我试试看。它适用于某些情况。但就我而言，我有一些元素需要位于页脚的左侧。还有一些是正确的。 在这种情况下，在容器上使用justify-content: space-between - 不需要浮动或文本对齐。
嗯。我测试它。这太好了。通过这种方式，元素自动对齐。 tnx【参考方案4】：
如果您像我在 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>
【讨论】：
我知道它的回复较晚，但它会帮助其他人.. 如果您使用margin-left: auto，则无需使用float: right 属性....！就我而言，没有它也可以工作..
@ShubhamJha 你能解释一下它背后的逻辑吗？
float:right 和 text-align:right 都是不必要的。 margin-left:auto 可以解决问题。好主意 D.Soderberg以上是关于浮动在弹性容器中不起作用的主要内容，如果未能解决你的问题，请参考以下文章