flexbox

Posted 2020-09-07 嘿_QQ熊

Flexbox 布局功能在定义框的大小时会考虑留出一些可用空间，让你可以调节相对大小和位置。例如，你可以确保浏览器窗口中的多余空白区域平均分布给多个子元素的大小，并确保将这些子元素置于容器块的中间。

使用 Flexbox 布局功能，你可以：

• 构建这样一种布局—即使屏幕和浏览器窗口大小发生改变也可灵活调整—，但包含彼此的相对位置和大小保持不变的元素（如图像或控件）。
• 指定如何沿着一系列元素的布局轴（水平轴或垂直轴）按比例分配多余空间，从而增加给定元素的大小。
• 指定如何沿着一系列元素的布局轴将多余空间分配到一系列元素之前、之后或之间。
• 指定如何将垂直于元素布局轴的多余空间分布到该元素的周围，例如，并排布局的按钮上方或下方的多余空间。
• 控制元素在页面上的布局方向—（例如从上到下、从左到右、从右到左或从下到上）。
• 按照不同于文档对象模型 (DOM) 所指定排序方式对屏幕上的元素重新排序。

Flexbox 容器

要启用 Flexbox 布局，必须首先创建一个 Flexbox 容器。完成该操作的方法是，将元素的 display 属性设置为 "-ms-flexbox"（对于块级 Flexbox 容器）或 "-ms-inline-flexbox"（对于内联级 Flexbox 容器）。（由于 CSS 弹性框布局模块草案尚处于准备阶段，所以这一节中的属性必须在使用时带有 Microsoft 专用的供应商前缀“-ms-”，才能配合 Internet Explorer 10 和适用于 Windows 8 的使用 javascript 的 Windows 应用商店应用一起使用。）例如，下面的代码示例在具有 "myFlexbox" ID 的元素内创建块级 Flexbox 容器：

CSS

 

<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  background: gray;
  border: blue;
}
</style>

设置 Flexbox 方向

在创建 Flexbox 容器时，还可以设置其方向—即指定是从右到左、从左到右、从上到下还是从下到上显示其子元素。下列属性可用于此目的：

属性	描述
-ms-flex-direction	指定对象的所有子元素布局中的方向。   此属性的可能值包括以下关键字： row 这是初始值。子元素的显示顺序与在源文档中声明它们的顺序相同，即从左到右。 column 子元素的显示顺序与在源文档中声明它们的顺序相同，即从上到下。 row-reverse 子元素的显示顺序与在源文档中声明它们的顺序相反，即从右到左。 column-reverse 子元素的显示顺序与在源文档中声明它们的顺序相反，即从下到上。 inherit 子元素的显示顺序与父元素中该属性的计算值的顺序相同。

 

例如，以下 ID 选择器已经添加了 -ms-flex-direction 属性并将其设置为 row：

CSS

 

<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-direction: row;
  background: grey;
  border: blue;
}
</style>

设置 Flexbox 方向

在创建 Flexbox 容器时，你还可以设置其对齐方式—即指定其子元素应沿着什么方向显示，但垂直于由 -ms-flex-direction 属性所定义的布局轴。

属性

描述

-ms-flex-align

指定对象子元素的对齐方式（垂直于 -ms-flex-direction 属性定义的布局轴）。   此属性的可能值包括以下关键字。请注意，这些关键字是与 writing-mode 相关的关键字，父元素和子元素的前边缘以及子元素的后边缘都取决于布局方向。例如，对于从左到右布局，前边缘是父元素的上边缘；对于从上到下布局，前边缘是父元素的左边缘，依此类推。同样，对于从左到右布局，子元素的后边缘是下边缘；对于从上到下布局，子元素的后边缘是右边缘，依此类推。 start 如果父元素具有 row 或 column 的 -ms-flex-direction 的计算值，则每个子元素的前边缘（或基线）都与对象的前边缘对齐。垂直于布局轴的所有剩余空间都位于每个子元素的后边缘之后。 如果父元素具有 row-reverse 或 column-reverse 的 -ms-flex-direction 的计算值，则每个子元素的后边缘（或基线）都与对象的后边缘对齐。垂直于布局轴的所有剩余空间都位于每个子元素的前边缘之前。 end 如果父元素具有 row 或 column 的 -ms-flex-direction 的计算值，则每个子元素的后边缘都与对象的后边缘对齐。垂直于布局轴的所有剩余空间都位于每个子元素的前边缘之前。 如果父元素具有 row-reverse 或 column-reverse 的 -ms-flex-direction 的计算值，则每个子元素的前边缘都与对象的前边缘对齐。垂直于布局轴的所有剩余空间都位于每个子元素的后边缘之后。 center 每个子元素都位于对象的前、后边缘的中间。垂直于布局轴的所有剩余空间都均匀地分布在每个子元素前后。 stretch 这是初始值。将拉伸每个子元素，以完全填满垂直于布局轴的可用空间。如果已设置，则子元素的 max-width 或 max-height 属性优先，并且布局遵循 start 规则。 baseline 所有子元素的基线（前边缘或后边缘，具体取决于 -ms-flex-direction 属性）相互对齐。 垂直于布局轴的占用最多空间的子元素遵循 start 规则；然后，所有剩余元素的基线与此元素的基线对齐。

 

例如，以下 ID 选择器已经添加了 -ms-flex-align 属性并将其设置为 start：

CSS

 

<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-align: start;
  background: grey;
  border: blue;
}
</style>

将空白区域分布到各个 Flexbox 子元素之间

可以通过使用如下属性指定 Flexbox 子元素之间的空白区域分布：

属性

描述

-ms-flex-pack

指定如何在对象的子元素之间分布多余空间（沿 -ms-flex-direction 属性定义的轴）。   此属性的可能值包括以下关键字。请注意，这些关键字是与 writing-mode 相关的关键字；父元素和子元素的起始和终止边缘取决于布局方向。例如，对于从左到右布局，起始边缘是父元素的左边缘。对于从上到下布局，起始边缘是上边缘，依此类推。同样，子元素的终止边缘是从左到右布局中的右边缘、从上到下布局中的下边缘，依此类推。 start 这是初始值。第一个子元素的起始边缘位于父元素开头；下一个子元素的起始边缘与第一个子元素的终止边缘边对边接合；沿布局轴方向依此类推。沿布局轴剩余的所有空间都放置在布局轴末端。 end 第一个子元素的终止边缘位于父元素末端。下一个子元素的终止边缘与第一个子元素的起始边缘边对边接合，沿布局轴方向依此类推。沿布局轴剩余的所有空间都放置在布局轴开头。 center 所有子元素彼此边对边接合，如有关 start 或 end 关键字的说明中所述。但是，子元素组位于父元素的起始和终止边缘的中间，以便所有剩余空间均匀地分布在第一个子元素之前、最后一个子元素之后。 justify 第一个子元素的起始边缘位于父元素开头。最后一个子元素的终止边缘与父框的终止边缘边对边接合；所有剩余的子元素都位于第一个和最后一个子元素之间，以便沿布局轴剩余的所有空间都均匀地分布在子元素之间。

 

例如，以下 ID 选择器已经添加了 -ms-flex-pack 属性并将其设置为 justify：

CSS

 

<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-pack: justify;
  background: grey;
  border: blue;
}
</style>

启用子元素自动换行

可以通过使用如下属性来启用溢出的 Flexbox 子元素自动换行到下一行以及控制流动方向：

属性	描述
-ms-flex-wrap	指定是否根据对象中的可用空间将子元素包装到多个行或列上。   此属性的可能值包括以下关键字： none 这是初始值。所有子元素都在单行或单列中显示。对象的 overflow 属性确定子元素是隐藏状态、裁剪状态还是可滚动。 wrap 将包装子元素并在连续的平行行或列中显示它们。对象将扩展高度或宽度（垂直于 writing-mode 属性定义的轴），以适应其他行或列。 wrap-reverse 将包装子元素并以相反顺序在连续的平行行或列中显示它们。对象将扩展高度或宽度（垂直于 writing-mode 属性定义的轴），以适应其他行或列。

 

请注意 Internet Explorer 10 将尝试通过将所有框收缩到其最小尺寸，尽可能使子元素在父框中位于最少的行数上。在单个行中无法容纳的单个元素将在该行的结尾被截断。

按照默认设置，其他行将沿着分块方向添加。在从左到右和从右到左布局中，新行被添加到现有行的下面（除非已在别处明确指定了从上到下的分块方向）。同样，新行是出现在垂直布局的右侧还是左侧具体取决于分块方向，而分块方向可能是从左到右或从右到左，具体取决于书写方向或其他特定设置。

例如，以下 ID 选择器已经添加了 -ms-flex-wrap 属性并将其设置为 wrap：

CSS

 

<style type="text/css">
#myFlexbox
{
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  background: grey;
  border: blue;
}
</style>

添加 Flexbox 子元素

既然你已创建了 Flexbox 容器，就可以在其中添加子元素。要将子元素添加到 Flexbox 容器中，须使该元素成为 Flexbox 元素的直接子元素，如以下标记中所示：

CSS

 

<style type="text/css">
#myFlexbox {
  background: gray;
  border: blue;
  display: -ms-flexbox;
}
#child1 {
  background: maroon; 
  border: orange solid 1px;
}
#child2 {
  background: lightgray;
  border: red solid 1px;
}
</style>
<body>
<div id="myFlexbox">
  <div id="child1">child 1</div>
  <div id="child2">child 2</div>
</div>
...
</body>

设置子元素的弹性

你可以控制多余空间如何沿着父框的布局轴成比例地分配给各个子元素。使用 -ms-flex 属性，你可以使 Flexbox 项目“具有弹性”，从而改变它们的宽度或高度以填充可用的空间。Flexbox 将可用空间分发给它的项目（与项目的正弹性成正比），或将它们缩小以防止溢出（与项目的负弹性成正比）。

当包含 -ms-flex 属性的元素为 Flexbox 项目，则查询 -ms-flex 属性而不是 width 或 height 属性以确定元素的主要尺寸。（如果元素不是 Flexbox 项目，则 -ms-flex 属性不起作用。）

属性

描述

-ms-flex

根据对象中的可用空间指定子元素的宽度或高度是否有弹性。此值还指示分配给子元素的可用空间的比例。 其语法如下： CSS   -ms-flex: <positive-flex> <negative-flex> <preferred-size>   此属性可以设置为任何以下值或 none。 <positive-flex> 一个用于设置正弹性的整数。 如果省略，则元素的正弹性为“1”。 负值无效。 <negative-flex> 一个用于设置负弹性的整数。 如果省略，则元素的负弹性为“0”。 负值无效。 <preferred-size> 设置弹性框项目的首选大小。可以是 width 或 height 属性的任一有效值，不包括 inherit。 如果省略，则首选大小是 "0px"。 如果 <preferred-size> 部分是弹性框的子元素上的 auto，则首选大小是弹性框项目的 width 或 height 属性的值（任一与主轴平行的值）。 none 这是初始值。等效于将 -ms-flex 设置为 "0 0 auto"。

 

分组 Flexbox 子元素

通过使用组编号来控制每个元素沿着布局轴呈现的顺序（即使此顺序与 DOM 顺序不同），你可以分组 Flexbox 子元素。要设置分组，请使用以下属性：

属性	描述
-ms-flex-order	指定 Flexbox 元素所属的序数组。此整数指示组的显示顺序（沿着由 -ms-flex-direction 属性所指定的轴）。 值必须是大于零的整数。此属性的初始值为 "0"。

 

-ms-flex-order 属性使你能将元素放置在序数组中，从序数组 0 开始。每个序数组中的所有子元素都沿着指定的布局轴呈现在下一个序数组中的任何子元素之前。因此，序数组 0 中的所有子元素都呈现在序数组 1 的任何子元素之前，依次类推。序数组以内的元素按照 DOM 顺序呈现。按照默认设置，其他行将沿着分块的方向添加。

例如，以下标记指定四个子元素并使用 -ms-flex-order 属性为它们中的大多数分配序数值：

• child1 的 -ms-flex-order 值为 "1"
• child2 的 -ms-flex-order 值为 "0"，这是初始值
• child3 的 -ms-flex-order 值为 "0"
• child4 没有 -ms-flex-order 属性，这意味着它被设置为 -ms-flex-order 的初始值 "0"

CSS

 

<style type="text/css">
#myFlexbox {
  display: -ms-flexbox;
  color: white;
  font-size: 48px;
  font-family: "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: left;
  height: 200px;
  border: none;
}
#child1 {
  -ms-flex-order: 1;
  background: #43e000;  
  padding: 20px;
}
#child2 {
  -ms-flex-order: 0;
  background: #166aff;
  padding: 20px;
}
#child3 {
  -ms-flex-order: 1;
  background: #43e000;
  padding: 20px;
}
#child4 {
  background: #166aff;
  padding: 20px;
}
</style>
</head>
<body>
<div id="myFlexbox">
  <div id="child1">1</div>
  <div id="child2">2</div>
  <div id="child3">3</div>
  <div id="child4">4</div>
</div>
</body>

child2 和 child4 都位于序数组 0 中，而 child1 和 child3 都位于序数组 1 中。因为在每个序数组内，子元素都按照 DOM 顺序呈现，所以这些元素在父 Flexbox 元素中按照以下顺序显示：child2、child4、child1、child3。参见下面的屏幕截图：

来自：https://msdn.microsoft.com/library/hh673531(v=vs.85).aspx