From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../backwards_compatibility_of_flexbox/index.html | 121 ++++++ .../index.html" | 121 ------ .../css/css_flexible_box_layout/mixins/index.html | 408 --------------------- .../index.html | 123 +++++++ .../typical_use_cases_of_flexbox/index.html | 131 +++++++ .../using_css_flexible_boxes/index.html | 408 --------------------- .../index.html | 187 ---------- .../index.html" | 131 ------- .../index.html" | 123 ------- 9 files changed, 375 insertions(+), 1378 deletions(-) create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html delete mode 100644 "files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" delete mode 100644 files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html create mode 100644 files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html delete mode 100644 files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html delete mode 100644 files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html delete mode 100644 "files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" delete mode 100644 "files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" (limited to 'files/zh-cn/web/css/css_flexible_box_layout') diff --git a/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..df269a9211 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,121 @@ +--- +title: Flexbox的向下支持 +slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 +tags: + - '@supports' + - IE + - Safari + - flexbox + - 兼容 + - 弹性盒子 + - 旧版本 + - 浏览器 +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +

{{CSSRef}}

+ +

虽然弹性盒子被各种现代浏览器很好的支持, 但是你或许还会遇到一些问题。在这个文档中，我们将会了解到浏览器支持弹性盒子的情况和一些潜在的问题, 以及处理它们的资源和方法。

+ +

弹性盒子的历史

+ +

与所有CSS标准一样，弹性盒子标准经历了一系列的改动，直到它成为我们现有的候选推荐版本。作为候选推荐，我们不该着重于当下对于该规范的大量变动，尽管历来弹性盒子的迭代情况有所不同。

+ +

弹性盒子曾在许多浏览器中作为实验功能的方式被实现。当时进行实验性的实现的方式是使用浏览器前缀。这种关于前缀的构思是为了让规范的实现能被测试，并被浏览器工程师和网页开发者等在不和其他实现冲突的情况下浏览。也就是说不再生产代码中使用实验性的实现。然后，前缀最终被用在了生产代码中，结果对实验性规范的不管修改导致了人们需要不断对网站进行对应的修改。

+ +

在2009年时，规则看起来很不一样。当时，要创建一个弹性容器你会用display: box ，会有一大堆 box-* 属性，和现在的弹性盒子显然完全不同。

+ +

曾有一个规范的更新将语法换成了 display: flexbox ——这仍旧是浏览器前缀。

+ +

最后规范被修改成，定义 display: flex 作为创建弹性容器的方式。对于最新版本规范的浏览器支持自此就尽善尽美了。

+ +

有很多老的关于弹性盒子规范旧版本的文章还存着，但他们都容易通过弹性盒子容器创建的方式来辨别。如果你在其中找到任何关于display: box或者display: flexbox的内容，那么它们就是过时的信息。

+ +

浏览器支持情况

+ +

现代浏览器能够很好的支持flexbox，并且大多数浏览器不需要前缀。2015年，Safari9是最后一个移除前缀的主流浏览器。2个需要注意浏览器兼容的浏览器是：

+ + + +

现在，IE11 已经支持display: flex，但是在使用的时候会有一些bug。

+ +

常见问题

+ +

由于经过了发展,flexbox的大多数问题与规范的变更有关，而且事实上我们很多人都试图在生产中环境中使用实验性的规范。 如果您要确保与旧版本的浏览器（尤其是IE10和11）向后兼容，则 Flexbugs 网站是一个有用的资源。 您将看到许多列出的bug都适用于旧的浏览器版本，并且在当前的浏览器中已修复。 每个错误都有列出的解决方法-可以节省许多时间。

+ +

如果你想要支持非常旧的浏览器使用flexbox属性，在CSS中加入：

+ +
.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+ +

Autoprefixer Online是查看推荐使用前缀浏览器的有效方式，具体取决于您希望通过浏览器支持返回多少版本。 您还可以从 Can I Use 中以获取浏览器支持的信息,以便在已经支持的浏览器中删除前缀

+ +

有用的向下支持技术

+ +

假设弹性盒子使用 {{cssxref("display")}} 的属性值定义，当我们需要为不支持弹性盒子的旧版本的浏览器提供支持时，向下支持（fallback）技术可以用来覆写布局方式。如果你使用其他布局方法作用于一个元素，随后该元素又成为了弹性盒子的 item，规范定义了会发生什么。

+ +

浮动元素

+ +
+

“浮动和清除浮动不会在 flex item 上触发浮动和清除行为，并且不会脱离当前文档流。” - 3. Flex Containers

+
+ +

在下面的示例中，我将两个块级元素浮动，然后给容器设置了 display: flex。这两个元素现在变成了弹性盒子元素，意味着它们会伸展使得高度相同，并且没有应用任何浮动行为。

+ +

你可以通过移除 display: flex 属性来测试这项向下支持行为。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

+ +

display: inline-block

+ +

一旦一个 inline-block 元素成为了一个弹性盒子元素，那么它将被块级化，因此 display: inline-block 属性的诸如在元素间保留空白符等行为将不会被应用。

+ +

移除 display: flex 属性来查看该向下支持行为，你将会看见这两个元素之间多出的空白符，这是因为使用 display: inine-block 时会把空白符当成其他行内元素对待。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

+ +

display: table-

+ +

CSS 中表格相关的系列属性可能是非常有用的向下支持技术，因为它们允许一些设计模式，例如全高度列和垂直居中等，甚至可以向后兼容至 IE8。

+ +

假如你在 HTML 中对一个元素使用 display: table-cell，它将呈现为表格单元格样式。CSS 会创建一个匿名盒子来呈现这些元素，这样你就不用包裹每一个元素来呈现表格的行（row），以及另外一个元素来呈现这个表格自身。你无法看见或修改这些匿名盒子的样式，它们只是单纯的用来修补文档树。

+ +

如果你在父元素上设置了 display: flex，这些匿名盒子将不会被创建，这样你的元素就保留直接的子元素并成为了一个弹性盒子元素 — 失去所有表格元素的特性。

+ +
+

“注意：display 的某些属性值通常会在初始盒子周围触发匿名盒子的创建行为。如果该盒子是一个弹性盒子元素，那么它会先被块级化，使得匿名盒子不会被创建。例如，两个连续的弹性盒子元素设置了 display: table-cell 后，将会成为两个独立分开的 display: block 弹性盒子元素，而不是被包裹近单独的一个匿名表格中。” - 4. Flex Items

+
+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

+ +

vertical-align 属性

+ +

下面的示例展示了 {{cssxref("vertical-align")}} 属性与 display: inline-block 结合使用的情况。display: table-cell 和 display: inline-block 都允许使用该属性。使用 vertical-align 可以使垂直排列优先于弹性盒子。这个属性会被弹性盒子忽略，这样你就可以将它与 display: table-cell 或者 display: inline-block 结合使用来作为一个向下支持技巧，然后就可以在弹性盒子中安全地使用盒子排列属性。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

+ +

特性枚举与弹性盒子

+ +

你可以使用特性枚举（feature queries）来检查弹性盒子的支持情况：

+ +
@supports (display: flex) {
+  // 添加在支持的浏览器中书写的样式代码
+}
+ +

注意 Internet Explorer 11 不支持特性枚举，但是支持弹性盒子。如果你觉得在 IE11 中实现不易并且希望对它使用向下支持布局，那么你可以使用特性枚举只在对弹性盒子支持良好的浏览器中使用弹性盒子属性规则。需要记住的是，如果你想用浏览器厂商前缀的弹性盒子属性来包含某版本的浏览器，你需要在特性枚举中包含该版本浏览器的前缀。下面的特性枚举例子就兼容了 UC 浏览器，它支持特性枚举并且支持旧版弹性盒子语法：

+ +
@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}
+ +

查看更多关于特性枚举的信息请访问：Using Feature Queries in CSS。

+ +

结尾

+ +

当我在这个指南中花时间来检查潜在的问题和向下支持技巧时，弹性盒子已经做好了在生产环境中运作的充分准备。该指南可能会在你遇到问题或者需要支持旧版本浏览器时帮到你。

diff --git "a/files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" "b/files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" deleted file mode 100644 index df269a9211..0000000000 --- "a/files/zh-cn/web/css/css_flexible_box_layout/flexbox_\347\232\204_\345\220\221\344\270\213_\346\224\257\346\214\201/index.html" +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Flexbox的向下支持 -slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox_的_向下_支持 -tags: - - '@supports' - - IE - - Safari - - flexbox - - 兼容 - - 弹性盒子 - - 旧版本 - - 浏览器 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox ---- -

{{CSSRef}}

- -

虽然弹性盒子被各种现代浏览器很好的支持, 但是你或许还会遇到一些问题。在这个文档中，我们将会了解到浏览器支持弹性盒子的情况和一些潜在的问题, 以及处理它们的资源和方法。

- -

弹性盒子的历史

- -

与所有CSS标准一样，弹性盒子标准经历了一系列的改动，直到它成为我们现有的候选推荐版本。作为候选推荐，我们不该着重于当下对于该规范的大量变动，尽管历来弹性盒子的迭代情况有所不同。

- -

弹性盒子曾在许多浏览器中作为实验功能的方式被实现。当时进行实验性的实现的方式是使用浏览器前缀。这种关于前缀的构思是为了让规范的实现能被测试，并被浏览器工程师和网页开发者等在不和其他实现冲突的情况下浏览。也就是说不再生产代码中使用实验性的实现。然后，前缀最终被用在了生产代码中，结果对实验性规范的不管修改导致了人们需要不断对网站进行对应的修改。

- -

在2009年时，规则看起来很不一样。当时，要创建一个弹性容器你会用display: box ，会有一大堆 box-* 属性，和现在的弹性盒子显然完全不同。

- -

曾有一个规范的更新将语法换成了 display: flexbox ——这仍旧是浏览器前缀。

- -

最后规范被修改成，定义 display: flex 作为创建弹性容器的方式。对于最新版本规范的浏览器支持自此就尽善尽美了。

- -

有很多老的关于弹性盒子规范旧版本的文章还存着，但他们都容易通过弹性盒子容器创建的方式来辨别。如果你在其中找到任何关于display: box或者display: flexbox的内容，那么它们就是过时的信息。

- -

浏览器支持情况

- -

现代浏览器能够很好的支持flexbox，并且大多数浏览器不需要前缀。2015年，Safari9是最后一个移除前缀的主流浏览器。2个需要注意浏览器兼容的浏览器是：

- - - -

现在，IE11 已经支持display: flex，但是在使用的时候会有一些bug。

- -

常见问题

- -

由于经过了发展,flexbox的大多数问题与规范的变更有关，而且事实上我们很多人都试图在生产中环境中使用实验性的规范。 如果您要确保与旧版本的浏览器（尤其是IE10和11）向后兼容，则 Flexbugs 网站是一个有用的资源。 您将看到许多列出的bug都适用于旧的浏览器版本，并且在当前的浏览器中已修复。 每个错误都有列出的解决方法-可以节省许多时间。

- -

如果你想要支持非常旧的浏览器使用flexbox属性，在CSS中加入：

- -
.wrapper {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
- -

Autoprefixer Online是查看推荐使用前缀浏览器的有效方式，具体取决于您希望通过浏览器支持返回多少版本。 您还可以从 Can I Use 中以获取浏览器支持的信息,以便在已经支持的浏览器中删除前缀

- -

有用的向下支持技术

- -

假设弹性盒子使用 {{cssxref("display")}} 的属性值定义，当我们需要为不支持弹性盒子的旧版本的浏览器提供支持时，向下支持（fallback）技术可以用来覆写布局方式。如果你使用其他布局方法作用于一个元素，随后该元素又成为了弹性盒子的 item，规范定义了会发生什么。

- -

浮动元素

- -
-

“浮动和清除浮动不会在 flex item 上触发浮动和清除行为，并且不会脱离当前文档流。” - 3. Flex Containers

-
- -

在下面的示例中，我将两个块级元素浮动，然后给容器设置了 display: flex。这两个元素现在变成了弹性盒子元素，意味着它们会伸展使得高度相同，并且没有应用任何浮动行为。

- -

你可以通过移除 display: flex 属性来测试这项向下支持行为。

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}

- -

display: inline-block

- -

一旦一个 inline-block 元素成为了一个弹性盒子元素，那么它将被块级化，因此 display: inline-block 属性的诸如在元素间保留空白符等行为将不会被应用。

- -

移除 display: flex 属性来查看该向下支持行为，你将会看见这两个元素之间多出的空白符，这是因为使用 display: inine-block 时会把空白符当成其他行内元素对待。

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}

- -

display: table-

- -

CSS 中表格相关的系列属性可能是非常有用的向下支持技术，因为它们允许一些设计模式，例如全高度列和垂直居中等，甚至可以向后兼容至 IE8。

- -

假如你在 HTML 中对一个元素使用 display: table-cell，它将呈现为表格单元格样式。CSS 会创建一个匿名盒子来呈现这些元素，这样你就不用包裹每一个元素来呈现表格的行（row），以及另外一个元素来呈现这个表格自身。你无法看见或修改这些匿名盒子的样式，它们只是单纯的用来修补文档树。

- -

如果你在父元素上设置了 display: flex，这些匿名盒子将不会被创建，这样你的元素就保留直接的子元素并成为了一个弹性盒子元素 — 失去所有表格元素的特性。

- -
-

“注意：display 的某些属性值通常会在初始盒子周围触发匿名盒子的创建行为。如果该盒子是一个弹性盒子元素，那么它会先被块级化，使得匿名盒子不会被创建。例如，两个连续的弹性盒子元素设置了 display: table-cell 后，将会成为两个独立分开的 display: block 弹性盒子元素，而不是被包裹近单独的一个匿名表格中。” - 4. Flex Items

-
- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}

- -

vertical-align 属性

- -

下面的示例展示了 {{cssxref("vertical-align")}} 属性与 display: inline-block 结合使用的情况。display: table-cell 和 display: inline-block 都允许使用该属性。使用 vertical-align 可以使垂直排列优先于弹性盒子。这个属性会被弹性盒子忽略，这样你就可以将它与 display: table-cell 或者 display: inline-block 结合使用来作为一个向下支持技巧，然后就可以在弹性盒子中安全地使用盒子排列属性。

- -

{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}

- -

特性枚举与弹性盒子

- -

你可以使用特性枚举（feature queries）来检查弹性盒子的支持情况：

- -
@supports (display: flex) {
-  // 添加在支持的浏览器中书写的样式代码
-}
- -

注意 Internet Explorer 11 不支持特性枚举，但是支持弹性盒子。如果你觉得在 IE11 中实现不易并且希望对它使用向下支持布局，那么你可以使用特性枚举只在对弹性盒子支持良好的浏览器中使用弹性盒子属性规则。需要记住的是，如果你想用浏览器厂商前缀的弹性盒子属性来包含某版本的浏览器，你需要在特性枚举中包含该版本浏览器的前缀。下面的特性枚举例子就兼容了 UC 浏览器，它支持特性枚举并且支持旧版弹性盒子语法：

- -
@supports (display: flex) or (display: -webkit-box) {
-  // code for supporting browsers
-}
- -

查看更多关于特性枚举的信息请访问：Using Feature Queries in CSS。

- -

结尾

- -

当我在这个指南中花时间来检查潜在的问题和向下支持技巧时，弹性盒子已经做好了在生产环境中运作的充分准备。该指南可能会在你遇到问题或者需要支持旧版本浏览器时帮到你。

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html b/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html deleted file mode 100644 index d2054bc725..0000000000 --- a/files/zh-cn/web/css/css_flexible_box_layout/mixins/index.html +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: 使用弹性盒子进行高级布局 -slug: Web/CSS/CSS_Flexible_Box_Layout/Mixins -tags: - - CSS3布局模型 - - Flexible_Box - - Flexible_Box_Layout - - Layout - - 弹性盒子 - - 弹性盒子模型 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mixins ---- -

使用弹性盒子的意义是在任何尺寸的屏幕上改变其和其子元素的尺寸填充屏幕可用空间。一个弹性框容器将延展它的子元素以填充可用空间，并且缩小它的子元素来避免溢出。

- -

浮动布局的问题

- - - -

弹性盒子如何处理

- - - -

弹性盒子属性

- -

placeholder

- - - -

弹性容器属性

- - - -

弹性元素属性

- - - -

弹性盒子混合

- -

对于希望在现代浏览器原生支持下使用弹性盒子的用户，这里有全部的支撑表格：http://caniuse.com/flexbox

- -

将会使用：

- - - -

启发于：

- - - -

可以从这些地方获取帮助：

- - - -

弹性容器

- -

“flex”值会引起一个元素生成一个盒级的弹性盒子。

- -

“inline-flex”会生成一个行内弹性盒子。

- -

display: flex | inline-flex http://w3.org/tr/css3-flexbox/#flex-containers

- -
-
@mixin flexbox {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -moz-flex;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-// 使用这样的混合模式
-%flexbox { @include flexbox; }
-
- -
-
@mixin inline-flex {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -moz-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-}
-
-%inline-flex { @include inline-flex; }
-
- -

弹性盒子方向

- -

“flex-direction”属性通过设置容器主轴来定义弹性元素如何在容器内排列。这个属性确定了弹性元素排列的方向。

- -

值：row | row-reverse | column | column-reverse

- -

http://w3.org/tr/css3-flexbox/#flex-direction-property

- -
-
@mixin flex-direction($value: row) {
-  @if $value == row-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: horizontal;
-  } @else if $value == column {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-  } @else if $value == column-reverse {
-    -webkit-box-direction: reverse;
-    -webkit-box-orient: vertical;
-  } @else {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: horizontal;
-  }
-  -webkit-flex-direction: $value;
-  -moz-flex-direction: $value;
-  -ms-flex-direction: $value;
-  flex-direction: $value;
-}
-
-// 简短版本：
-@mixin flex-dir($args...) { @include flex-direction($args...); }
-
- -

弹性盒子换行

- -

“flex-wrap”属性控制了容器为单行还是多行。并且定义了侧轴的方向，新行将沿侧轴方向堆砌。

- -

值：nowrap | wrap | wrap-reverse

- -

默认：nowrap

- -

http://w3.org/tr/css3-flexbox/#flex-wrap-property

- -
-
@mixin flex-wrap($value: nowrap) {
-  // No Webkit Box fallback.
-  -webkit-flex-wrap: $value;
-  -moz-flex-wrap: $value;
-  @if $value == nowrap {
-    -ms-flex-wrap: none;
-  } @else {
-    -ms-flex-wrap: $value;
-  }
-  flex-wrap: $value;
-}
-
- -

弹性盒子流（简写）

- -

“flex-flow”属性是设置“flex-direction”和“flex-wrap”的简写，可以同时定义主轴和侧轴。

- -

默认值：row nowrap

- -

http://w3.org/tr/css3-flexbox/#flex-flow-property

- -
-
@mixin flex-flow($values: (row nowrap)) {
-  // No Webkit Box fallback.
-  -webkit-flex-flow: $values;
-  -moz-flex-flow: $values;
-  -ms-flex-flow: $values;
-  flex-flow: $values;
-}
-
- -

弹性盒子顺序

- -

“order”属性通过将这些元素分配到序数分组来控制它们出现的顺序。

- -

默认值：0

- -

http://w3.org/tr/css3-flexbox/#order-property

- -
-
@mixin order($int: 0) {
-  -webkit-box-ordinal-group: $int + 1;
-  -webkit-order: $int;
-  -moz-order: $int;
-  -ms-flex-order: $int;
-  order: $int;
-}
-
- -

弹性盒子增长

- -

“flex-grow”属性设置增长因数，不接受负值。

- -

默认值：0

- -

http://w3.org/tr/css3-flexbox/#flex-grow-property

- -
-
@mixin flex-grow($int: 0) {
-  -webkit-box-flex: $int;
-  -webkit-flex-grow: $int;
-  -moz-flex-grow: $int;
-  -ms-flex-positive: $int;
-  flex-grow: $int;
-}
-
- -

弹性盒子收缩

- -

“flex-shrink”属性设置了收缩因数，不接受负值。

- -

默认值：1

- -

http://w3.org/tr/css3-flexbox/#flex-shrink-property

- -
-
@mixin flex-shrink($int: 1) {
-  -webkit-flex-shrink: $int;
-  -moz-flex-shrink: $int;
-  -ms-flex-negative: $int;
-  flex-shrink: $int;
-}
-
- -

弹性盒子伸缩

- -

“flex-basis”属性设置了弹性框伸缩的基准值，不接受负值。

- -

值：类似“width”，默认值：auto

- -

http://www.w3.org/TR/css3-flexbox/#flex-basis-property

- -
-
@mixin flex-basis($value: auto) {
-  -webkit-flex-basis: $value;
-  -moz-flex-basis: $value;
-  -ms-flex-preferred-size: $value;
-  flex-basis: $value;
-}
-
- -

弹性盒子“Flex”属性（简写）

- -

“flex”属性设置了弹性盒子长度的组成，包括增长因数、收缩因数和伸缩基准值。对于一个弹性元素，“flex”属性会被用来设置元素的尺寸，对于一个非弹性元素，该属性无效。

- -

值：none | ||

- -

默认值：见独立属性（1 1 0）

- -

http://w3.org/tr/css3-flexbox/#flex-property

- -
-
@mixin flex($fg: 1, $fs: null, $fb: null) {
-
-  // Set a variable to be used by box-flex properties
-  $fg-boxflex: $fg;
-
-  // Box-Flex only supports a flex-grow value so lets grab the
-  // first item in the list and just return that.
-  @if type-of($fg) == 'list' {
-    $fg-boxflex: nth($fg, 1);
-  }
-
-  -webkit-box-flex: $fg-boxflex;
-  -webkit-flex: $fg $fs $fb;
-  -moz-box-flex: $fg-boxflex;
-  -moz-flex: $fg $fs $fb;
-  -ms-flex: $fg $fs $fb;
-  flex: $fg $fs $fb;
-}
-
- -

弹性盒子对齐方式

- -

“justify-content”属性将弹性元素沿容器主轴方向对齐。当所有弹性元素的长度和边距都设置好之后，布局完成。一般情况下，当行内所有弹性元素尺寸不可变或可变且达到最大尺寸的情况下，该属性会分配剩余可用空间。同时，当元素溢出行的时候，它也会对其排列做出控制。

- -

提示：以前版本的语法不支持“space-*”值。

- -

值：flex-start | flex-end | center | space-between | space-around 默认值：flex-start

- -

http://w3.org/tr/css3-flexbox/#justify-content-property

- -
-
@mixin justify-content($value: flex-start) {
-  @if $value == flex-start {
-    -webkit-box-pack: start;
-    -ms-flex-pack: start;
-  } @else if $value == flex-end {
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-  } @else if $value == space-between {
-    -webkit-box-pack: justify;
-    -ms-flex-pack: justify;
-  } @else if $value == space-around {
-    -ms-flex-pack: distribute;
-  } @else {
-    -webkit-box-pack: $value;
-    -ms-flex-pack: $value;
-  }
-  -webkit-justify-content: $value;
-  -moz-justify-content: $value;
-  justify-content: $value;
-}
-  // Shorter version:
-  @mixin flex-just($args...) { @include justify-content($args...); }
-
- -

弹性元素对齐

- -

可以设置弹性元素在容器侧轴上的对齐方式，与“justify-content”功能相似但是方向垂直。“align-items”设置弹性盒子的所有子元素的对齐方式，包括匿名弹性元素。元素可以通过单独设置“align-self”来覆盖该属性。（对于匿名弹性元素，“align-self'”属性总是与“align-items”相同。）

- -

值：flex-start | flex-end | center | baseline | stretch 默认值：stretch

- -

http://w3.org/tr/css3-flexbox/#align-items-property

- -
-
@mixin align-items($value: stretch) {
-  @if $value == flex-start {
-    -webkit-box-align: start;
-    -ms-flex-align: start;
-  } @else if $value == flex-end {
-    -webkit-box-align: end;
-    -ms-flex-align: end;
-  } @else {
-    -webkit-box-align: $value;
-    -ms-flex-align: $value;
-  }
-  -webkit-align-items: $value;
-  -moz-align-items: $value;
-  align-items: $value;
-}
-
- -

弹性元素自对齐

- -

用来单独设置弹性元素在侧轴的对齐方式，功能与“align-items”相同。可以覆盖“align-items”属性。

- -

值：auto | flex-start | flex-end | center | baseline | stretch 默认值：auto

- -
-
@mixin align-self($value: auto) {
-  // No Webkit Box Fallback.
-  -webkit-align-self: $value;
-  -moz-align-self: $value;
-  @if $value == flex-start {
-    -ms-flex-item-align: start;
-  } @else if $value == flex-end {
-    -ms-flex-item-align: end;
-  } @else {
-    -ms-flex-item-align: $value;
-  }
-  align-self: $value;
-}
-
- -

弹性元素内容对齐

- -

“align-content”属性设置了容器内每行沿侧轴的对齐方式。与“justify-content”属性在主轴方向对齐单独元素的方式相似。如果容器内只有一行，该属性无效。

- -

值：flex-start | flex-end | center | space-between | space-around | stretch 默认值：stretch

- -

http://w3.org/tr/css3-flexbox/#align-content-property

- -
-
@mixin align-content($value: stretch) {
-  // No Webkit Box Fallback.
-  -webkit-align-content: $value;
-  -moz-align-content: $value;
-  @if $value == flex-start {
-    -ms-flex-line-pack: start;
-  } @else if $value == flex-end {
-    -ms-flex-line-pack: end;
-  } @else {
-    -ms-flex-line-pack: $value;
-  }
-  align-content: $value;
-}
-
diff --git a/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html new file mode 100644 index 0000000000..c90b3416a5 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/relationship_of_flexbox_to_other_layout_methods/index.html @@ -0,0 +1,123 @@ +--- +title: 弹性盒子与其他布局方法的联系 +slug: Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 +tags: + - CSS + - box alignment + - flexbox +translation_of: >- + Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods +--- +
{{CSSRef}}
+ +

在本文中，我们将了解弹性盒子（Flexbox）如何与所有其他CSS模块相适应。如果您想学习flexbox，我们将一起找出需要注意的规范和flexbox与一些其他模块不同的原因。

+ +
+

注意：CSS 1和CSS 2是一个单一的整体规范，其中所有CSS都定义在一个文档中。随着CSS成为一种功能更加丰富的语言，各个部分有不同的发展速度，如何维护一个庞大的规范就成了问题。因此现在的CSS是模块化的，不同的CSS模块有不同的规范，一起构成了现在的CSS。这些模块之间相互关联，并且处于不同的开发阶段。

+
+ +

box alignment 模块

+ +

许多人开始关注flexbox的最初原因是在flex容器中能够很好的对齐其中的元素。flexbox可以设置在其交叉轴以及主轴上的对齐属性。

+ +

这些属性最开始出现在flexbox规范中，现在已经成为Box Alignment规范的一部分。 这个规范详细说明了在所有布局中（不仅仅是flexbox）对齐属性是如何起作用的。 对齐属性用于设置元素对齐方式和沿轴的空间分配。

+ +

之所以在flexbox规范和box alignment模块规范中都有对对齐属性的详细描述，是为了确保flexbox规范的完成不会受box alignment模块规范的影响，因为后者需要详细说明所有的布局类型中的对齐方法。flexbox规范中有一条注释指出将来一旦Box Alignment Level 3完成，它将会取代flexbox规范中的相关定义：

+ +
+

“注意：虽然对齐属性是在CSS Box Alignment [CSS-ALIGN-3]中定义的，但“ Flexible Box Layout”在此处重现了相关属性的定义，以免形成规范性的依赖关系，而这可能会减慢规范的发展。这些属性仅适用于Flex布局，直到CSS Box Alignment Level 3完成并定义其对其他布局模式的效果；此外，在Box Alignment模块中定义的任何新值都将应用于Flexible Box Layout；换句话说，一旦Box Alignment模块完成，其中的相关定义将取代此处的定义。”

+
+ +

在本系列的后续文章（在flex容器中对齐元素）中，我们将彻底研究Box Alignment属性如何应用于flex元素。

+ +

gap属性

+ +

属性{{cssxref("row-gap")}} 和 {{cssxref("column-gap")}}，其简写为{{cssxref("gap")}}，近期添加到了盒子布局规范中。这些属性（名称为grid-row-gap, grid-column-gap and grid-gap）最初定义在CSS网格布局中。但是他们被重命名并移入盒子布局规范。这样的话，所有的布局方法都可以使用这些属性。不过在浏览器实现Flex的这些属性之前只能通过{{cssxref("margin")}} 来控制元素之间的间隙距离。

+ +

Writing Modes

+ +

In the Basic concepts of flexbox article, I explained that flexbox is writing mode aware. Writing modes are fully detailed in the CSS Writing Modes specification, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding block and inline directions is key to new layout methods.

+ +

It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. 

+ +

The writing modes

+ +

The writing modes specification defines the following values of the {{cssxref("writing-mode")}} property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.

+ + + +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

+ +

Note that sideways-rl and sideways-lr have support only in Firefox currently. There are also some known issues with regard to writing-mode and flexbox. You can see more information on browser support in the MDN documentation for writing-mode. However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!

+ +

Note that you would not normally use CSS and the writing-mode property to change an entire document to another writing mode. This would be done via HTML, by adding a dir and lang attribute to the html element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.

+ +

Flexbox and other layout methods

+ +

The flexbox specification contains a definition of what happens if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.

+ +

An element set to display: flex behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.

+ +

With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having display: flex applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the {{cssxref("vertical-align")}} property, as used with inline-block or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.

+ +

In this next live example the child elements have been floated, and then their container has had display: flex added. If you remove display: flex, you should see that the .box element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply display: flex and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

+ +

Flexbox and Grid Layout

+ +

CSS Grid Layout and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the flex properties that may have been assigned to the child elements will be ignored.

+ +

You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.

+ +

Flex and grid — what's the difference?

+ +

A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing?

+ +

The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. The example below has a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

+ +

If we create a very similar layout using Grid, we can control the layout in both rows and columns.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

+ +

These examples point to another key difference between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.

+ +

In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.

+ +

As a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.

+ +

For more comparisons of grid and flexbox see the article Relationship of Grid Layout to other layout methods. This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.

+ +

Flexbox and display: contents

+ +

The contents value of the {{cssxref("display")}} property is a new value that is described in the spec as follows:

+ +
+

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

+
+ +

This value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.

+ +

In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.

+ +

By adding display: contents to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the display: contents line to see it return.

+ +

Note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.

+ +
+

Warning: Use of display: contents will also remove the element from the accessibility tree – screen readers will not see what's inside, just the same as if you used display: none. Use of contents should only be for presentational, not content, elements.

+
+ +

Also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children. If you remove display: contents in this live example you will see that the direct child we are removing has an orange background colour. This also disappears when the box disappears. 

+ +

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

+ +

Browser support for display:contents is limited and required for this demo to work. Firefox supports display: contents already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..1b4c283f36 --- /dev/null +++ b/files/zh-cn/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,131 @@ +--- +title: Flexbox典型用例 +slug: Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +--- +

{{CSSRef}}

+ +

在这个文档中，我们将看一些常见flexbox的用例—这些都是比其他布局更合理的方法。

+ +

为什么选择flexbox？

+ +

在浏览器完美支持的环境中，你选择使用flexbox的原因是你希望把一堆元素不是放在这个方向就是那个方向。 因为在放置元素过程中，你想控制元素在那个方向的维度，或者控制他们彼此之间的间距。flexbox就是为此设计的。. 又可以阅读Relationship of Flexbox to other layout methods来了解更多关于flexbox和CSS Grid布局的区别, 在这篇文章里面，我们会讨论flexbox如何运用与CSS整体布局。

+ +

在现实中，为了便于对齐，我们通常会选择用Flexbox作为替代品，来完成即使用Grid布局更好的情况。一旦盒子对齐（Box Alignment ）被盒模型所实行，这种情况就会得到改善。在这个教程中，我们会介绍一些会在现在使用flexbox的用例。

+ +

导航

+ +

导航的一个常见特征，就是使用水平条的样式去呈现一系列元素。这一模式看起来很简单，但是在 flexbox 出现之前却是很难实现的。 它成为一个最简单的 flexbox 示例，可以被被看成是 flexbox 理想的使用场景。

+ +

当我们有一组元素需要水平排列展示，很可能在末尾会多出一些空间。我们需要决定如何去处理这些额外的空间，通常有多种不同的方案。 我们要么在元素外部展示这些空间即使用间距或包裹的方式来分隔开不同元素，要么将空间吸收至元素内部即需要一个方法来允许元素拉伸以占满额外空间。

+ +

在元素外部处理空间分布

+ +

为了让多余的空间分布在多个元素之间或周围，我们使用 flexbox 中相应的对齐属性以及 {{cssxref("justify-content")}} 属性。你可以通过 Aligning Items in a flex container 来阅读更多关于这个专门用来处理主轴（main axis）对齐的属性。

+ +

在下面的示例中，我们让各元素都展示为其自身的尺寸，通过使用 justify-content: space-between 使元素之间拥有相同的空间。你可以通过 space-around 的值来改变空间分布的方式，在浏览器支持的环境下还可以使用 space-evenly。你也可以使用 flex-start 让空间展示在所有元素末尾。使用 flex-end 让空间展示在所有元素之前,  center 可以剧中所有元素。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

让元素自己处理空间分布

+ +

导航的另一个不同模式是让元素自己去决定如何处理额外的空间，而不是将空间分布在它们之间。 在这种情况下，我们使用 {{cssxref("flex")}} 属性来允许各元素彼此成比例的拉伸和收缩，正如 Controlling ratios of flex items along the main axis 所描述。

+ +

如果我想让导航中的所有元素都等宽，会使用 flex: auto，这是 flex: 1 1 auto 的简写形式。所有元素都在它们的 flex-basis 尺寸上进行自动的收缩。这意味着，较长的元素会获得更多的空间。因为 flex-basis 的值被设置为 0，所以所有空间都会被平均分配。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

拆分导航

+ +

另一种在主轴上对齐元素的方式就是使用自动边距。 这种方式将创造出一部分元素左对齐而另一部分右对齐的导航栏设计。

+ +

这儿我们使用在 Using auto margins for main axis alignment 这篇文章中介绍的自动边距技术。所有的元素在主轴上按照弹性盒布局的默认设定 flex-start 进行对齐，同时我们给那个需要右对齐的元素添加 margin-left: auto; 样式。你可以尝试将那个类名转移到其它元素上以改变（向右）分割作用的位置。

+ +

在这个例子里我们也为每个元素启用了 margin 属性来控制元素间的间隔，并给容器添加负边距以保证元素与容器的接洽处没有缝隙。在弹性盒布局实现盒式对齐规范中的 gap 属性前，如果我们想要控制元素的间隔就不得不使用使用边距属性。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

元素居中

+ +

在弹性盒布局到来之前，开发者们曾开玩笑说网页设计中最难的部分是垂直居中。 现在，使用弹性盒布局中的对齐属性，这会变得很简单，如下例所示。

+ +

你可以修改对齐方式，用 flex-start 使元素对齐到交叉轴的开始处或者用 flex-end 使元素对齐到交叉轴的结束处。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

在未来，我们可能不需要为了元素的居中而创建一个弹性盒容器，因为盒对齐属性最终会在块布局中实现。但是现在，假如你想在一个元素中居中另一个，弹性盒布局是一个很好的选择。在上面的例子中，将一个元素放入弹性盒容器里之后，要么在容器中使用 align-items， 要么在元素中使用 align-self 来达到所需的效果。

+ +

绝对底部

+ +

不管你使用的是弹性盒还是网格来进行布局，这些布局方式都只对弹性盒容器或者网格容器的（直接）子元素生效。这也意味着即使你的 content 长度不定，组件在高度上仍会充满整个弹性盒容器或者网格容器。但任何使用常规块布局的方法都会导致 content 内容较少时 footer 上升到 content 下方而不是容器的底部。Two card components showing that the internals of the component do not stretch with the wrapper.

+ +

弹性盒就能解决常规块布局的问题。我们创建一个弹性盒容器， 并启用 {{cssxref("flex-direction")}}: column 。之后我们在 content 部分启用 flex: 1 —— flex: 1 1 0 的缩略形式，这个元素就可以在 flex-basis 为零的基础上伸缩。因为这是唯一一个可以延伸的元素，它会占据所有在弹性盒容器中可以占据的空间，同时将 footer 推至底部。如果你移除例子里的属性 flex 你就会看见 footer 回到 content 底部。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

媒体对象

+ +

媒体对象是网页设计中的常见模式：这种模式下，一侧具有图片或其他元素，另一侧具有文本。理想情况下，媒体对象应该可以翻转：即把图片从左侧移动到右侧。

+ +

这种模式随处可见，用于评论、以及其他需要显示图片和描述的地方。使用flexbox可以允许包含图片的媒体对象部分从图片中获取其尺寸调整信息，并对媒体对象的主体进行弹性布局，以占用剩余空间。

+ +

在下面的实例中，您可以看到我们的媒体对象。使用对齐属性来将交叉轴上的元素对齐到flex-start，然后为.content flex元素设置为flex: 1。与上面的列布局卡片模式一样，启用flex: 1表示此部分卡片可以延伸。

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.

+ +

为避免图片过大，可以在为图片添加{{cssxref("max-width")}}。由于媒体对象那一侧使用的是flexbox的初始值，它可以缩小但不会延伸，且其 flex-basis 值是auto。应用于图片的任何{{cssxref("width")}} 或 max-width将会成为flex-basis。

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

你也可以允许双方按比例延伸和缩小。如果将两边都设置为flex: 1，它们从{{cssxref("flex-basis")}}为0增长和缩小，因此最终会得到两个大小相等的列。你可以将内容作为指南，并将其都设置为 flex: auto，这种情况下，它们将从内容的大小或直接应用于弹性元素的任何大小（例如图片的宽度）延伸和缩小。

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of auto but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

Flipping the media object

+ +

To switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse. The media object now displays the other way around. I have achieved this in the live example by adding a class of flipped alongside the existing .media class. This means you can see how the display changes by removing that class from the html.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

Form controls

+ +

Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an {{htmlelement("input")}} element paired with a {{htmlelement("button")}}, perhaps for a search form or where you simply want your visitor to enter an email address.

+ +

Flexbox makes this type of layout easy to achieve. I have contained my <button> and <input> field in a wrapper which I have given a border and set to display: flex. I then use the flex properties to allow the <input> field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background colour I didn’t need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.

+ +

结论

+ +

当了解上面的这些示例时，你已经满怀希望的想象怎么找到最好的方式使用弹性盒子布局实现你想要的结果。大部分情况下，你拥有不止一种选择。将可以变化的内容和不能变化的混合在一起，通过内容来决定他们的大小或者允许弹性布局设置按比例分配空间。要因地制宜，对症下药。

+ +

先考虑一下用什么方法展示你的内容比较好，然后在了解怎么用弹性布局或其他布局方法实现你的想法。

diff --git a/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html deleted file mode 100644 index d50cf7582f..0000000000 --- a/files/zh-cn/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html +++ /dev/null @@ -1,408 +0,0 @@ ---- -title: 使用 CSS 弹性盒子 -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -tags: - - CSS - - CSS Flexible Boxes - - Flex - - Web - - flexbox - - 弹性 - - 弹性容器 - - 弹性盒子 - - 弹性项目 - - 指南 - - 盒子模型 - - 范例 - - 进阶 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---- -
{{CSSRef}}
- -

CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

- -

许多设计师会发现弹性盒子模型更易于使用。弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。

- -
注意： 虽然 CSS 弹性盒子布局规范 还处于最终征求意见稿 (Last Call Working Draft)阶段（参见最新编辑草案），并非所有浏览器都实现了弹性盒子的所有功能。但，这么说吧，现在全线产品对弹性盒子都有良好支持。最新的兼容性状况可以查看每个具体属性的兼容性表格获取。
- -

弹性盒布局概念

- -

在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

- -

块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。虽然块级布局对于单独一个页面来说是行之有效的，但其仍缺乏足够的定义来支持那些必须随用户代理(user agent)不同或设备方向从水平转为垂直等各种变化而变换方向、调整大小、拉伸、收缩的应用程序组件。 弹性盒子布局主要适用于应用程序的组件及小规模的布局，而（新兴的）栅格布局则针对大规模的布局。这二者都是 CSS 工作组为在不同用户代理、不同书写模式和其他灵活性要求下的网页应用程序有更好的互操作性而做出的更广泛的努力的一部分。

- -

弹性盒布局相关词汇

- -

关于弹性盒子的讨论已经从诸如水平/行内轴和垂直/块级轴这些术语中解放出来，与此同时，需要有一套新的术语来正确描述此模型。在学习下面的词汇项目时请对照下图。图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

- -

弹性布局相关名词

- -
-
弹性容器(Flex container)
-
包含着弹性项目的父元素。通过设置 {{Cssxref("display")}} 属性的值为 flex 或 inline-flex 来定义弹性容器。
-
弹性项目(Flex item)
-
-

弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

-
-
轴(Axis)
-
-

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

- -
    -
  • flex-direction 确立主轴。
    • -
  • justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
    • -
  • align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
    • -
  • align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。
    • -
-
-
方向(Direction)
-
-

弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

- -
    -
  • order 属性将元素与序号关联起来，以此决定哪些元素先出现。
    • -
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。
    • -
-
-
行(Line)
-
-

根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

-
-
尺寸(Dimension)
-
-

根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。

- - -
-
- -

定义一个弹性盒子

- -

为要使用此样式的元素指派 CSS，需按以下方式设置 display 属性：

- -
display : flex
- -

或者

- -
display : inline-flex
- -

这样做将元素定义为弹性容器，其子元素则成为弹性项目。值 flex 使弹性容器成为块级元素。值 inline-flex 使弹性容器成为单个不可分的行内级元素。

- -
注意：厂商前缀标记会附加给 display 属性值，而不是加给 display 属性本身。例如：display : -webkit-flex。
- -

弹性项目须知

- -

弹性容器直接包含的文本将自动包覆成匿名弹性项目。不过，一个只包含一系列空白符（如一堆空格或制表符等）的匿名弹性项目不会被渲染，就如同对其指派 display: none。

- -

对于弹性容器的绝对定位子元素来说，其静态位置参照弹性容器的内容框的主起始角确定，而后依此完成此元素的定位。

- -

相邻的弹性元素其外边距不会互相合并。使用 auto 外边距可以吸收掉水平或垂直方向上的额外空间，这可以用于对齐或分隔相邻的弹性项目。更多细节请参考 W3C 弹性框布局模型规范中的 Aligning with 'auto' margins。

- -

不像 CSS 中的其他对齐方法，弹性框的对齐属性将进行“真正的”居中对齐。这意味着即使弹性条目溢出了弹性容器，它依然保持居中。不过这在某些时候可能会有问题。如果溢出超过了页面的上边缘或左边缘（在从左到右的语言中，比如英语；在诸如阿拉伯语这样从右到左的语言中这个问题更会出现在右边缘），则虽然那些地方确实有内容，却无法滚动到那些位置。在未来的发布版本里，对齐属性将会有所扩展，使其包含有“安全”选项。目前，如果操心这点，可以改用外边距来达成居中效果，因为外边距会用比较“安全”的方式来响应变化，出现溢出时将停止居中。对这种需要居中的弹性项目，不使用 align- 属性，而使用自动外边距就能解决这个问题。对弹性容器中第一个和最后一个弹性项目的外侧边缘应用，也可以使用自动外边距来替代 justify- 属性。自动外边距会自动伸缩来占满剩余空间，当有剩余空间存在时弹性项目将会居中，如果没有则切换至常规对齐方式。不过很不幸，如果尝试在多行的弹性框中用基于外边距的居中方法来替代 justify-content，就必须对每一行的第一个和最后一个弹性项目应用外边距。此时除非能够事先预测每一行都结束于哪个元素，否则就不能愉快的在主轴方向上用基于外边距的居中方法来替代 justify-content 属性了。

- -

再强调一遍，元素的显示顺序与它们在源代码中的顺序无关，这种无关性只影响视觉呈现，语音顺序以及基于源代码顺序的导航均不受影响。{{cssxref("order")}} 属性并不影响语音和导航的次序。因此开发者们必须小心，合理地安排元素在源代码中的顺序，以免破坏文档的可访问性。

- -

弹性盒子相关属性

- -

不影响弹性盒子的属性

- -

由于弹性盒子使用了不同的布局算法，某些属性用在弹性容器上没有意义：

- - - -

示例

- -

基本的弹性布局示例

- -

这个基本的示例展示了如何对元素应用弹性布局，以及在弹性布局状态下相邻元素的行为方式。

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-   .flex
-   {
-      /* 基本样式 */
-      width: 350px;
-      height: 200px;
-      border: 1px solid #555;
-      font: 14px Arial;
-
-      /*  建立弹性框 */
-      display: -webkit-flex;
-      -webkit-flex-direction: row;
-
-      display: flex;
-      flex-direction: row;
-   }
-
-   .flex > div
-   {
-      -webkit-flex: 1 1 auto;
-      flex: 1 1 auto;
-
-      width: 30px; /* 让过渡表现良好。（从/到"width:auto"的过渡
-                      至少在 Gecko 和 Webkit 上是有 bug 的。
-                      更多信息参见 http://bugzil.la/731886 ） */
-
-      -webkit-transition: width 0.7s ease-out;
-      transition: width 0.7s ease-out;
-   }
-
-   /* colors */
-   .flex > div:nth-child(1){ background : #009246; }
-   .flex > div:nth-child(2){ background : #F1F2F1; }
-   .flex > div:nth-child(3){ background : #CE2B37; }
-
-   .flex > div:hover
-   {
-        width: 200px;
-   }
-
-   </style>
-
- </head>
- <body>
-  <p>Flexbox nuovo</p>
-  <div class="flex">
-    <div>uno</div>
-    <div>due</div>
-    <div>tre</div>
-  </div>
- </body>
-</html>
- -

圣杯布局示例

- -

此示例展示了弹性盒子根据不同屏幕分辨率动态改变布局的能力。下图说明了这种转换。

- -

HolyGrailLayout.png

- -

这里展示的正是针对浏览器窗口的页面布局必须为智能手机窗口优化的场景。不仅元素的尺寸需要缩减，其呈现顺序也需要改变。弹性盒子让这变得很简单。

- -
​<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <style>
-
-  body {
-   font: 24px Helvetica;
-   background: #999999;
-  }
-
-  #main {
-   min-height: 800px;
-   margin: 0px;
-   padding: 0px;
-   display: -webkit-flex;
-   display:         flex;
-   -webkit-flex-flow: row;
-           flex-flow: row;
-   }
-
-  #main > article {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #cccc33;
-   border-radius: 7pt;
-   background: #dddd88;
-   -webkit-flex: 3 1 60%;
-           flex: 3 1 60%;
-   -webkit-order: 2;
-           order: 2;
-   }
-
-  #main > nav {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 1;
-           order: 1;
-   }
-
-  #main > aside {
-   margin: 4px;
-   padding: 5px;
-   border: 1px solid #8888bb;
-   border-radius: 7pt;
-   background: #ccccff;
-   -webkit-flex: 1 6 20%;
-           flex: 1 6 20%;
-   -webkit-order: 3;
-           order: 3;
-   }
-
-  header, footer {
-   display: block;
-   margin: 4px;
-   padding: 5px;
-   min-height: 100px;
-   border: 1px solid #eebb55;
-   border-radius: 7pt;
-   background: #ffeebb;
-   }
-
-  /* 窄到已不足以支持三栏 */
-  @media all and (max-width: 640px) {
-
-   #main, #page {
-    -webkit-flex-flow: column;
-            flex-direction: column;
-   }
-
-   #main > article, #main > nav, #main > aside {
-    /* 恢复到文档内的自然顺序 */
-    -webkit-order: 0;
-            order: 0;
-   }
-
-   #main > nav, #main > aside, header, footer {
-    min-height: 50px;
-    max-height: 50px;
-   }
-  }
-
- </style>
-  </head>
-  <body>
- <header>header</header>
- <div id='main'>
-    <article>article</article>
-    <nav>nav</nav>
-    <aside>aside</aside>
- </div>
- <footer>footer</footer>
-  </body>
-</html>
- -

试验场地

- -

有几个在线弹性盒子试验场地可供进行各种实验：

- - - -

务必牢记

- -

描述弹性项目如何排布的算法有时会极其棘手。在使用弹性盒子进行设计时，请考虑以下几点，以免碰到不好的意料外状况。

- -

弹性盒子的排布与书写模式是一致的，这意味着排布的主轴起点和主轴终点根据的是开始与结束的位置。

- -

侧轴起点与侧轴终点依赖于开始或前面（before）的位置定义，而这个“前面”依赖于 direction 的值。

- -

只要 break- 属性的设置值允许，在弹性框布局中是可以存在分页的。CSS3 中的 break-after、break-before 和 break-inside，以及 CSS 2.1 中的 page-break-before、page-break-after 和 page-break-inside 属性在弹性容器上、弹性项目上和弹性项目内均可以使用。

- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
特性Firefox (Gecko)ChromeInternet ExplorerOperaSafari
基础支持（单行弹性框）{{CompatGeckoDesktop("18.0")}}[6]{{property_prefix("-moz")}}[2]
- {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
多行弹性框{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}
- 29.0		11[3]12.10[5]
- 15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
特性Firefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
基础支持（单行弹性框）{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]
- {{CompatGeckoMobile("22.0")}}		 -

1.0{{property_prefix("-moz")}}[2]
- 1.1

- 		2.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
多行弹性框{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]
- 4.4		1112.10[5]
- 15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
-
- -

[1] Safari 在版本 6.0 (iOS.1)以前支持的是规范的一个与现有版本不兼容的旧版草案。Safari 6.1（以及 iOS 7 上的 Safari）已更新为支持最终版本。

- -

[2] 直到 Firefox 22 为止，用户必须修改 about:config 设置，将 layout.css.flexbox.enabled 改为 true 才能激活对弹性盒子的支持。从 Firefox 22 到 Firefox 27，此设置项默认为 true，而 Firefox 28 中取消了此设置项。

- -

[3] Internet Explorer 10 支持的是规范的一个与现有版本不兼容的旧版草案；Internet Explorer 11 已更新为 支持最终版本。

- -

[4] Android 浏览器直到 4.3 为止支持的是规范的一个与现有版本不兼容的旧版草案。Android 4.4 已更新为支持最终版本。

- -

[5] 在 Opera 12.10 的弹性盒子初始实现中是没有前缀的，但 Opera 版本 15 到 16 和 Opera Mobile 的 15 到 19 需要 {{property_prefix("-webkit")}}. 在 Opera 17 及 Opera Mobile 24 中再次取消了前缀。

- -

[6] 直到 Firefox 29 为止，在弹性项目上指定 visibility: collapse 将使其被视为 display: none 处理，而预期的行为是被视为 visibility: hidden。建议的处理方式是在弹性项目上使用 visibility:hidden，这样其行为应当与指派了 visibility:collapse 一致。更多信息，参考 {{bug(783470)}}.

- -

参见

- - diff --git a/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html b/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html deleted file mode 100644 index 9ea8045d96..0000000000 --- a/files/zh-cn/web/css/css_flexible_box_layout/using_flexbox_to_lay_out_web_applications/index.html +++ /dev/null @@ -1,187 +0,0 @@ ---- -title: 使用flexbox来布局web应用 -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications -tags: - - CSS - - 弹性盒子 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox -translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications ---- -

{{CSSRef}}

- -

使用 flexbox 可以帮助你设计出引人注目的布局，并且在pc端或移动端能够很好的缩放。告别使用浮动的 {{HTMLElement("div")}} 元素、绝对定位 和一些JavaScript hacks, 使用仅仅几行 CSS 就可以构建出水平或垂直方向的布局。下面是一些基本的使用案例：

- - - -

这篇文章只囊括了在不使用前缀就可以支持现行标准的浏览器下如何使用 flexbox 的相关信息。 想了解更多关于带有供应商前缀的老版本浏览器的资料，请点击这里 the more general guide to using CSS flexible boxes.

- -

基础

- -

如果你想让元素呈水平或柱状，或如果你想让元素垂直布局，在任何 {{HTMLElement("div")}} 元素中，通过设置 {{cssxref("display")}} 属性为 flex 来使用flexbox，然后设置它任意一行的 {{cssxref("flex-flow")}} 属性, 你就可以在其中尽情的创建元素了。如果你正在使用水平的 flexbox，并想让你的内容垂直换行，只需指定值为wrap。

- -

接下来，只要你想让某个元素使用弹性布局，就为它添加 {{cssxref("flex")}} 属性。一般情况下，你将会使用下列三个值之一：

- - - -

有可能还有使用方法，但是这应该囊括了最基本的使用案例。让我们用几个例子来看看如何使用。

- -

示例 1: 在页面中把一个元素居中

- -

在这个例子中，要做的最简单的事情就是创建两个 flexbox，其中一个在另一个中。每个 flexbox 有三个元素：其中两个当作中间元素的垫子，另一个就是中间元素本身。

- -

CSS 内容

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.horizontal-box {
-  display: flex;
-  flex-flow: row;
-}
-.spacer {
-  flex: auto;
-  background-color: black;
-}
-.centered-element {
-  flex: none;
-  background-color: white;
-}
-
- -

HTML 内容

- -
<div class="vertical-box">
-  <div class="spacer"></div>
-  <div class="centered-element horizontal-box">
-    <div class="spacer"></div>
-    <div class="centered-element">Centered content</div>
-     <div class="spacer"></div>
-  </div>
-  <div class="spacer"></div>
-</div>
-
- -

结果

- -

{{ EmbedLiveSample('示例_1_在页面中把一个元素居中', 500, 500) }}

- -

示例2: 垂直放置一系列的容器

- -

假设你有一个带有头部区域，内容区域，和底部区域的页面。头部和底部应该有一个固定的尺寸，但是内容区域应该根据可以利用的空间来缩放。这可以通过设置内容区域的 {{cssxref("flex")}} 属性，设置头部区域 {{cssxref("flex")}} 属性，底部区域不设置来实现自动扩展功能。

- -

CSS 内容

- -
.vertical-box {
-  display: flex;
-  height: 400px;
-  width: 400px;
-  flex-flow: column;
-}
-.fixed-size {
-  flex: none;
-  height: 30px;
-  background-color: black;
-  text-align: center;
-}
-.flexible-size {
-  flex: auto;
-  background-color: white;
-}
-
- -

HTML 内容

- -
<div id="document" class="vertical-box">
-  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
-  <div id="flexible-content" class="flexible-size"></div>
-  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
-</div>
-
- -

Javascript 内容

- -
var height = 400;
-document.getElementById('increase-size').onclick=function() {
-  height += 10;
-  if (height > 500) height = 500;
-  document.getElementById('document').style.height = (height + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  height -= 10;
-  if (height < 300) height = 300;
-  document.getElementById('document').style.height = (height + "px");
-}
- -

结果

- -

{{ EmbedLiveSample('示例2_垂直放置一系列的容器', 500, 500) }}

- -

这个例子已经设定好了，可以通过点击头部来增加尺寸，通过点击底部来减小尺寸。仔细观察在保持头部和底部尺寸不变的情况下，内容区域是如何自动缩放的。

- -

示例3: 创建一个水平折叠的容器

- -

在某些时候，你可能想让一些信息在屏幕尺寸允许的情况下呈水平布局，但是在屏幕不允许的情况下可以水平折叠。这对 flexbox 来讲太容易实现了。你通过设置 {{cssxref("flex-flow")}} 的值为 wrap 来实现。

- -

CSS 内容

- -
.horizontal-container {
-  display: flex;
-  width: 300px;
-  flex-flow: row wrap;
-}
-.fixed-size {
-  flex: none;
-  width: 100px;
-  background-color: black;
-  color: white;
-  text-align: center;
-}
-
- -

HTML 内容

- -
<div id="container" class="horizontal-container">
-  <div class="fixed-size">Element 1</div>
-  <div class="fixed-size">Element 2</div>
-  <div class="fixed-size">Element 3</div>
-</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>
-
- -

Javascript 内容

- -
var width = 300;
-
-document.getElementById('increase-size').onclick=function() {
-  width += 100;
-  if (width > 300) width = 300;
-  document.getElementById('container').style.width = (width + "px");
-}
-
-document.getElementById('decrease-size').onclick=function() {
-  width -= 100;
-  if (width < 100) width = 100;
-  document.getElementById('container').style.width = (width + "px");
-}
-
- -

结果

- -

{{ EmbedLiveSample('示例3_创建一个水平折叠的容器', 500, 200) }}

- -

参考

- - diff --git "a/files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" "b/files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" deleted file mode 100644 index 1b4c283f36..0000000000 --- "a/files/zh-cn/web/css/css_flexible_box_layout/\345\205\270\345\236\213_\347\224\250\344\276\213_\347\232\204_flexbox/index.html" +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Flexbox典型用例 -slug: Web/CSS/CSS_Flexible_Box_Layout/典型_用例_的_Flexbox -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

在这个文档中，我们将看一些常见flexbox的用例—这些都是比其他布局更合理的方法。

- -

为什么选择flexbox？

- -

在浏览器完美支持的环境中，你选择使用flexbox的原因是你希望把一堆元素不是放在这个方向就是那个方向。 因为在放置元素过程中，你想控制元素在那个方向的维度，或者控制他们彼此之间的间距。flexbox就是为此设计的。. 又可以阅读Relationship of Flexbox to other layout methods来了解更多关于flexbox和CSS Grid布局的区别, 在这篇文章里面，我们会讨论flexbox如何运用与CSS整体布局。

- -

在现实中，为了便于对齐，我们通常会选择用Flexbox作为替代品，来完成即使用Grid布局更好的情况。一旦盒子对齐（Box Alignment ）被盒模型所实行，这种情况就会得到改善。在这个教程中，我们会介绍一些会在现在使用flexbox的用例。

- -

导航

- -

导航的一个常见特征，就是使用水平条的样式去呈现一系列元素。这一模式看起来很简单，但是在 flexbox 出现之前却是很难实现的。 它成为一个最简单的 flexbox 示例，可以被被看成是 flexbox 理想的使用场景。

- -

当我们有一组元素需要水平排列展示，很可能在末尾会多出一些空间。我们需要决定如何去处理这些额外的空间，通常有多种不同的方案。 我们要么在元素外部展示这些空间即使用间距或包裹的方式来分隔开不同元素，要么将空间吸收至元素内部即需要一个方法来允许元素拉伸以占满额外空间。

- -

在元素外部处理空间分布

- -

为了让多余的空间分布在多个元素之间或周围，我们使用 flexbox 中相应的对齐属性以及 {{cssxref("justify-content")}} 属性。你可以通过 Aligning Items in a flex container 来阅读更多关于这个专门用来处理主轴（main axis）对齐的属性。

- -

在下面的示例中，我们让各元素都展示为其自身的尺寸，通过使用 justify-content: space-between 使元素之间拥有相同的空间。你可以通过 space-around 的值来改变空间分布的方式，在浏览器支持的环境下还可以使用 space-evenly。你也可以使用 flex-start 让空间展示在所有元素末尾。使用 flex-end 让空间展示在所有元素之前,  center 可以剧中所有元素。

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

让元素自己处理空间分布

- -

导航的另一个不同模式是让元素自己去决定如何处理额外的空间，而不是将空间分布在它们之间。 在这种情况下，我们使用 {{cssxref("flex")}} 属性来允许各元素彼此成比例的拉伸和收缩，正如 Controlling ratios of flex items along the main axis 所描述。

- -

如果我想让导航中的所有元素都等宽，会使用 flex: auto，这是 flex: 1 1 auto 的简写形式。所有元素都在它们的 flex-basis 尺寸上进行自动的收缩。这意味着，较长的元素会获得更多的空间。因为 flex-basis 的值被设置为 0，所以所有空间都会被平均分配。

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- -

拆分导航

- -

另一种在主轴上对齐元素的方式就是使用自动边距。 这种方式将创造出一部分元素左对齐而另一部分右对齐的导航栏设计。

- -

这儿我们使用在 Using auto margins for main axis alignment 这篇文章中介绍的自动边距技术。所有的元素在主轴上按照弹性盒布局的默认设定 flex-start 进行对齐，同时我们给那个需要右对齐的元素添加 margin-left: auto; 样式。你可以尝试将那个类名转移到其它元素上以改变（向右）分割作用的位置。

- -

在这个例子里我们也为每个元素启用了 margin 属性来控制元素间的间隔，并给容器添加负边距以保证元素与容器的接洽处没有缝隙。在弹性盒布局实现盒式对齐规范中的 gap 属性前，如果我们想要控制元素的间隔就不得不使用使用边距属性。

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

元素居中

- -

在弹性盒布局到来之前，开发者们曾开玩笑说网页设计中最难的部分是垂直居中。 现在，使用弹性盒布局中的对齐属性，这会变得很简单，如下例所示。

- -

你可以修改对齐方式，用 flex-start 使元素对齐到交叉轴的开始处或者用 flex-end 使元素对齐到交叉轴的结束处。

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

在未来，我们可能不需要为了元素的居中而创建一个弹性盒容器，因为盒对齐属性最终会在块布局中实现。但是现在，假如你想在一个元素中居中另一个，弹性盒布局是一个很好的选择。在上面的例子中，将一个元素放入弹性盒容器里之后，要么在容器中使用 align-items， 要么在元素中使用 align-self 来达到所需的效果。

- -

绝对底部

- -

不管你使用的是弹性盒还是网格来进行布局，这些布局方式都只对弹性盒容器或者网格容器的（直接）子元素生效。这也意味着即使你的 content 长度不定，组件在高度上仍会充满整个弹性盒容器或者网格容器。但任何使用常规块布局的方法都会导致 content 内容较少时 footer 上升到 content 下方而不是容器的底部。Two card components showing that the internals of the component do not stretch with the wrapper.

- -

弹性盒就能解决常规块布局的问题。我们创建一个弹性盒容器， 并启用 {{cssxref("flex-direction")}}: column 。之后我们在 content 部分启用 flex: 1 —— flex: 1 1 0 的缩略形式，这个元素就可以在 flex-basis 为零的基础上伸缩。因为这是唯一一个可以延伸的元素，它会占据所有在弹性盒容器中可以占据的空间，同时将 footer 推至底部。如果你移除例子里的属性 flex 你就会看见 footer 回到 content 底部。

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

媒体对象

- -

媒体对象是网页设计中的常见模式：这种模式下，一侧具有图片或其他元素，另一侧具有文本。理想情况下，媒体对象应该可以翻转：即把图片从左侧移动到右侧。

- -

这种模式随处可见，用于评论、以及其他需要显示图片和描述的地方。使用flexbox可以允许包含图片的媒体对象部分从图片中获取其尺寸调整信息，并对媒体对象的主体进行弹性布局，以占用剩余空间。

- -

在下面的实例中，您可以看到我们的媒体对象。使用对齐属性来将交叉轴上的元素对齐到flex-start，然后为.content flex元素设置为flex: 1。与上面的列布局卡片模式一样，启用flex: 1表示此部分卡片可以延伸。

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

Some things that you might want to try in this live example relate to the different ways you might want to constrain the media object in your design.

- -

为避免图片过大，可以在为图片添加{{cssxref("max-width")}}。由于媒体对象那一侧使用的是flexbox的初始值，它可以缩小但不会延伸，且其 flex-basis 值是auto。应用于图片的任何{{cssxref("width")}} 或 max-width将会成为flex-basis。

- -
.image img {
-  max-width: 100px;
-}
-
- -

你也可以允许双方按比例延伸和缩小。如果将两边都设置为flex: 1，它们从{{cssxref("flex-basis")}}为0增长和缩小，因此最终会得到两个大小相等的列。你可以将内容作为指南，并将其都设置为 flex: auto，这种情况下，它们将从内容的大小或直接应用于弹性元素的任何大小（例如图片的宽度）延伸和缩小。

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

You could also give each side different {{cssxref("flex-grow")}} factors, for example setting the side with the image to flex: 1 and the content side to flex: 3. This will mean they use a flex-basis of auto but distribute that space at different rates according to the flex-grow factor you have assigned. The flex properties we use to do this are described in detail in the guide Controlling ratios of flex items along the main axis.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

Flipping the media object

- -

To switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse. The media object now displays the other way around. I have achieved this in the live example by adding a class of flipped alongside the existing .media class. This means you can see how the display changes by removing that class from the html.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

Form controls

- -

Flexbox is particularly useful when it comes to styling form controls. Forms have lots of markup and lots of small elements that we typically want to align with each other. A common pattern is to have an {{htmlelement("input")}} element paired with a {{htmlelement("button")}}, perhaps for a search form or where you simply want your visitor to enter an email address.

- -

Flexbox makes this type of layout easy to achieve. I have contained my <button> and <input> field in a wrapper which I have given a border and set to display: flex. I then use the flex properties to allow the <input> field to grow, while the button does not grow. This means we have a pair of fields, with the text field growing and shrinking as the available space changes.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

You could add a label or icon to the left as easily as we popped the button onto the right. I have added a label, and other than some styling for background colour I didn’t need to change the layout. The stretchy input field now has a little less space to play with but it uses the space left after the two items are accounted for.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.

- -

结论

- -

当了解上面的这些示例时，你已经满怀希望的想象怎么找到最好的方式使用弹性盒子布局实现你想要的结果。大部分情况下，你拥有不止一种选择。将可以变化的内容和不能变化的混合在一起，通过内容来决定他们的大小或者允许弹性布局设置按比例分配空间。要因地制宜，对症下药。

- -

先考虑一下用什么方法展示你的内容比较好，然后在了解怎么用弹性布局或其他布局方法实现你的想法。

diff --git "a/files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" "b/files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" deleted file mode 100644 index c90b3416a5..0000000000 --- "a/files/zh-cn/web/css/css_flexible_box_layout/\345\274\271\346\200\247\347\233\222\345\255\220\344\270\216\345\205\266\344\273\226\345\270\203\345\261\200\346\226\271\346\263\225\347\232\204\350\201\224\347\263\273/index.html" +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: 弹性盒子与其他布局方法的联系 -slug: Web/CSS/CSS_Flexible_Box_Layout/弹性盒子与其他布局方法的联系 -tags: - - CSS - - box alignment - - flexbox -translation_of: >- - Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods ---- -
{{CSSRef}}
- -

在本文中，我们将了解弹性盒子（Flexbox）如何与所有其他CSS模块相适应。如果您想学习flexbox，我们将一起找出需要注意的规范和flexbox与一些其他模块不同的原因。

- -
-

注意：CSS 1和CSS 2是一个单一的整体规范，其中所有CSS都定义在一个文档中。随着CSS成为一种功能更加丰富的语言，各个部分有不同的发展速度，如何维护一个庞大的规范就成了问题。因此现在的CSS是模块化的，不同的CSS模块有不同的规范，一起构成了现在的CSS。这些模块之间相互关联，并且处于不同的开发阶段。

-
- -

box alignment 模块

- -

许多人开始关注flexbox的最初原因是在flex容器中能够很好的对齐其中的元素。flexbox可以设置在其交叉轴以及主轴上的对齐属性。

- -

这些属性最开始出现在flexbox规范中，现在已经成为Box Alignment规范的一部分。 这个规范详细说明了在所有布局中（不仅仅是flexbox）对齐属性是如何起作用的。 对齐属性用于设置元素对齐方式和沿轴的空间分配。

- -

之所以在flexbox规范和box alignment模块规范中都有对对齐属性的详细描述，是为了确保flexbox规范的完成不会受box alignment模块规范的影响，因为后者需要详细说明所有的布局类型中的对齐方法。flexbox规范中有一条注释指出将来一旦Box Alignment Level 3完成，它将会取代flexbox规范中的相关定义：

- -
-

“注意：虽然对齐属性是在CSS Box Alignment [CSS-ALIGN-3]中定义的，但“ Flexible Box Layout”在此处重现了相关属性的定义，以免形成规范性的依赖关系，而这可能会减慢规范的发展。这些属性仅适用于Flex布局，直到CSS Box Alignment Level 3完成并定义其对其他布局模式的效果；此外，在Box Alignment模块中定义的任何新值都将应用于Flexible Box Layout；换句话说，一旦Box Alignment模块完成，其中的相关定义将取代此处的定义。”

-
- -

在本系列的后续文章（在flex容器中对齐元素）中，我们将彻底研究Box Alignment属性如何应用于flex元素。

- -

gap属性

- -

属性{{cssxref("row-gap")}} 和 {{cssxref("column-gap")}}，其简写为{{cssxref("gap")}}，近期添加到了盒子布局规范中。这些属性（名称为grid-row-gap, grid-column-gap and grid-gap）最初定义在CSS网格布局中。但是他们被重命名并移入盒子布局规范。这样的话，所有的布局方法都可以使用这些属性。不过在浏览器实现Flex的这些属性之前只能通过{{cssxref("margin")}} 来控制元素之间的间隙距离。

- -

Writing Modes

- -

In the Basic concepts of flexbox article, I explained that flexbox is writing mode aware. Writing modes are fully detailed in the CSS Writing Modes specification, which details how CSS supports the various different writing modes that exist internationally. We need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. Understanding block and inline directions is key to new layout methods.

- -

It is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. See this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. 

- -

The writing modes

- -

The writing modes specification defines the following values of the {{cssxref("writing-mode")}} property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. You can change the live example below to these modes in order to see what happens to the flex layout.

- - - -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/writing-modes.html", '100%', 360)}} 

- -

Note that sideways-rl and sideways-lr have support only in Firefox currently. There are also some known issues with regard to writing-mode and flexbox. You can see more information on browser support in the MDN documentation for writing-mode. However if you are planning on using writing modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read!

- -

Note that you would not normally use CSS and the writing-mode property to change an entire document to another writing mode. This would be done via HTML, by adding a dir and lang attribute to the html element to indicate the document language and default text direction. This would mean that the document would display correctly even if CSS did not load.

- -

Flexbox and other layout methods

- -

The flexbox specification contains a definition of what happens if an item uses another layout method and then becomes a flex item. For example, if an item is floated and then its parent becomes a flex container. Or, how a flex container behaves as part of layout.

- -

An element set to display: flex behaves in most ways like any other block level container that establishes a containing block. Floats will not intrude, and the containers' margins will not collapse.

- -

With regard to flex items, if an item was floated or cleared and then becomes a flex item due to the parent having display: flex applied, the floating and clearing will no longer happen, and the item will not be taken out of normal flow in the way that floats are. If you have used the {{cssxref("vertical-align")}} property, as used with inline-block or table layout for alignment, this will no longer affect the item and you can use the alignment properties of flexbox instead.

- -

In this next live example the child elements have been floated, and then their container has had display: flex added. If you remove display: flex, you should see that the .box element collapses as we have no clearing applied. This demonstrates that the float is happening. Re-apply display: flex and the collapsing does not happen. This is because the items no longer have a float applied, as they have been transformed into flex items.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/floats.html", '100%', 430)}}

- -

Flexbox and Grid Layout

- -

CSS Grid Layout and Flexbox generally act in the same way with regards to overwriting other methods. You might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older browsers. This approach works very well. If a flex item becomes a grid item, then the flex properties that may have been assigned to the child elements will be ignored.

- -

You can use the Box Alignment properties across both layout methods, so using flexbox as a fallback for grid layout can work very well.

- -

Flex and grid — what's the difference?

- -

A common question is to ask what the difference is between Flexbox and CSS Grid Layout — why do we have two specifications that sometimes appear to be doing the same thing?

- -

The most straightforward answer to this question is defined in the specifications themselves. Flexbox is a one-dimensional layout method whereas Grid Layout is a two-dimensional layout method. The example below has a flex layout. As already described in the Basic concepts article, flex items can be allowed to wrap but, once they do so, each line becomes a flex container of its own. When space is distributed flexbox does not look at the placement of items in other rows and tries to line things up with each other.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/flex-layout.html", '100%', 750)}}

- -

If we create a very similar layout using Grid, we can control the layout in both rows and columns.

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/grid-layout.html", '100%', 700)}}

- -

These examples point to another key difference between these layout methods. In Grid Layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. In flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves.

- -

In some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your CSS. There is rarely a right or wrong answer.

- -

As a rule of thumb, if you are adding widths to flex items in order to make items in one row of a wrapped flex container line up with the items above them you really want two-dimensional layout. In this case it is likely that the component would be better laid out using CSS Grid Layout. It isn't the case that you should use flexbox for small components and grid layout for larger ones; a tiny component can be two dimensional, and a large layout can be represented better with layout in one dimension. Try things out — we have a choice in layout method for the first time, so take advantage of it.

- -

For more comparisons of grid and flexbox see the article Relationship of Grid Layout to other layout methods. This article details many of the ways that Grid Layout differs from flex layout, and demonstrates some of the extra functionality you get when using Grid Layout such as layering of items on the grid. This may also help in your decision as to which layout method to use.

- -

Flexbox and display: contents

- -

The contents value of the {{cssxref("display")}} property is a new value that is described in the spec as follows:

- -
-

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

-
- -

This value of display controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.

- -

In the following live example I have a flex container with three child elements. One of these flex items has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.

- -

By adding display: contents to the wrapper around the nested elements, you can see that that item has disappeared from the layout, allowing the two sub-children to be laid out as if they were direct children of the flex container. You can try removing the display: contents line to see it return.

- -

Note that this only removes the box from the layout; the sub-children don’t become direct children in any other way. You can see that as I have used a direct child selector to add the background and borders to the flex items, this has not been applied to our nested children. They have been laid out as flex items, but as they are not direct children they do not get the other styling.

- -
-

Warning: Use of display: contents will also remove the element from the accessibility tree – screen readers will not see what's inside, just the same as if you used display: none. Use of contents should only be for presentational, not content, elements.

-
- -

Also, having removed the box you cannot then use it to — for example — add a background colour behind the nested sub children. If you remove display: contents in this live example you will see that the direct child we are removing has an orange background colour. This also disappears when the box disappears. 

- -

{{EmbedGHLiveSample("css-examples/flexbox/relationship/display-contents.html", '100%', 650)}}

- -

Browser support for display:contents is limited and required for this demo to work. Firefox supports display: contents already, and the value is being implemented in Chrome. Once there is better browser support this feature will be very useful in circumstances where you need the markup for semantic reasons but do not want to display the box that it would generate by default.

-- cgit v1.2.3-54-g00ecf