比较版本

使用 CSS 弹性盒

修订版 440417:

由 TimZhao 在 进行的修订 440417

修订版 440423:

由 TimZhao 在 进行的修订 440423

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

修订版 440417
修订版 440423
n8      CSS3 弹性盒,或者简称弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的<a hren8      CSS3 弹性盒,或者简称弹性盒,是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的<a hre
>f="/zh-CN/docs/CSS/Layout_mode" title="/zh-CN/docs/CSS/Layout_mod>f="/zh-CN/docs/CSS/Layout_mode" title="/zh-CN/docs/CSS/Layout_mod
>e">布局方式</a>。对于很多应用来讲,弹性盒在两个方面相对于盒模型进行了提升,它既不使用浮动,也不会导致弹性盒容器的外边距与其>e">布局方式</a>。对于很多应用来讲,弹性盒在两个方面相对于盒模型进行了提升,它既不使用浮动,也不会导致弹性盒容器的外边距与其
>内容的外边距进行合并。<span style="line-height: inherit;">&nbsp;</span>>内容的外边距之间发生塌陷。<span style="line-height: inherit;">&nbsp;</span>
9    </p>
10    <p>9    </p>
10    <p>
11      越来越多的设计师会发现弹性盒的易用性。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子11      越来越多的设计师会发现弹性盒的易用性。弹性盒中的子元素通过在各个方向放置就可以以弹性的尺寸适应父元素的显示区域。由于子
>元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现>元素的显示顺序和它们在代码中 的顺序是独立的,通过使用弹性盒,定位子元素变得更加简单,复杂的布局也能够使用更清晰的代码更简单的实现
>。独立显示被设定成只针对可见元素,而不是基于 代码的声明和导航顺序。>。独立显示被设定成只针对可见元素,而不是基于代码的声明和导航顺序。
t23      不同于盒布局的基于垂直方向以及行内布局的基于水平方向,弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好,但是t23      不同于盒布局的基于垂直方向以及行内布局的基于水平方向,弹性盒布局的算法是方向无关的。 虽然盒布局在页面中工作良好,但是
>其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。虽然正 在出现的网格布局>其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。不同于将要出现的网格布局
>目标为大比例布局,弹性盒布局适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需要 >针对目标为大比例布局,弹性盒布局适用于应用组件和小比例布局。这两种都是CSS工作组为了能与不同用户代理、不同书写模式和其他弹性需
>进行协作而做出的努力。>要进行协作而做出的努力。

返回历史