mozilla

比较版本

使用 CSS 弹性盒

更改版本

修订版 440423:

由 TimZhao 在 进行的修订 440423

修订版 471191:

由 Ribery 在 进行的修订 471191

标题:
使用 CSS 弹性盒
使用 CSS 弹性盒
网址缩略名:
CSS/Tutorials/Using_CSS_flexible_boxes
CSS/Tutorials/Using_CSS_flexible_boxes
标签:
"flexbox", "css", "伸缩布局", "弹性布局", "Flex"
"flexbox", "CSS", "伸缩布局", "弹性布局", "Flex"
内容:

修订版 440423
修订版 471191
t145      弹 性盒子的对齐会进行真正的居中,不CSS的其他居中方法。这意味着即使弹性容器溢出,子元素仍然保持居中。有些时候这可t145      弹 性盒子的对齐会进行真正的居中,不CSS的其他居中方法。这意味着即使弹性容器溢出,子元素仍然保持居中。有些时候这可
>能有问题,然而即使溢出了页面的 上沿,或左边沿(在从左到右的语言如英语;这个问题在从右到左的语言中发生在右边沿,如阿拉伯文),因为>能有问题,然而即使溢出了页面的 上沿,或左边沿(在从左到右的语言如英语;这个问题在从右到左的语言中发生在右边沿,如阿拉伯文),因为
>你不能滚动到那里,即使那里有内容!在将来的版本 中,对齐属性会被扩展为有一个“安全”选项。目前,如果关心这个问题,你可以使用外边距>你不能滚动到那里,即使那里有内容!在将来的版本 中,对齐属性会被扩展为有一个“安全”选项。目前,如果关心这个问题,你可以使用外边距
>来达到居中的目的,这种方式比较“安全”,在溢出的情况下会停止居 中。在你想要居中的弹性子元素上应用自动外边距代替<code>ali>来达到居中的目的,这种方式比较“安全”,在溢出的情况下会停止居 中。在你想要居中的弹性子元素上应用自动外边距代替<code>ali
>gn-</code>属性。在弹性容器的第一个和最后一个子元素的外侧应用自动外边距来代替<code>justify-</code>属>gn-</code>属性。在弹性容器的第一个和最后一个子元素的外侧应用自动外边距来代替<code>justify-</code>属
>性。自动外边距会伸缩并假定剩余空间,当有剩余空间时居中弹性子元素,没有剩余空间时切换会正常对齐模式。然而,如果你想要在多线弹性盒子>性。自动外边距会伸缩并假定剩余空间,当有剩余空间时居中弹性子元素,没有剩余空间时切换会正常对齐模式。然而,如果你想要在多线弹性盒子
>中用基于外边距的居中替换<code>justify-content属性,你可能就没那么幸运了,因为你需要在每一线的第一个和最后一个>中用基于外边距的居中替换<code>justify-content属性,你可能就没那么幸运了,因为你需要在每一线的第一个和最后一个
>元素上应用外边距。除非你能提前预测哪个元素是哪一线上的最后一个元素,否则你没法稳定地在主轴上用基于外边距的居中代替</code> >元素上应用外边距。除非你能提前预测哪个元素是哪一线上的最后一个元素,否则你没法稳定地在主轴上用基于外边距的居中代替</code> 
><code>justify-content 属性</code>。><code>justify-content 属性</code>。

返回历史