首页 > 代码库 > flexbox
flexbox
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 容器：
<style type="text/css">
#myFlexbox {
display: -ms-flexbox;
background: gray;
border: blue;
}
</style>
设置 Flexbox 方向
在创建 Flexbox 容器时，还可以设置其方向—即指定是从右到左、从左到右、从上到下还是从下到上显示其子元素。下列属性可用于此目的：
| 属性 | 描述 |
|---|---|
|
-ms-flex-direction |
指定对象的所有子元素布局中的方向。
此属性的可能值包括以下关键字：
|
例如，以下 ID 选择器已经添加了 -ms-flex-direction 属性并将其设置为 row：
<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 相关的关键字，父元素和子元素的前边缘以及子元素的后边缘都取决于布局方向。例如，对于从左到右布局，前边缘是父元素的上边缘；对于从上到下布局，前边缘是父元素的左边缘，依此类推。同样，对于从左到右布局，子元素的后边缘是下边缘；对于从上到下布局，子元素的后边缘是右边缘，依此类推。
|
例如，以下 ID 选择器已经添加了 -ms-flex-align 属性并将其设置为 start：
<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 相关的关键字；父元素和子元素的起始和终止边缘取决于布局方向。例如，对于从左到右布局，起始边缘是父元素的左边缘。对于从上到下布局，起始边缘是上边缘，依此类推。同样，子元素的终止边缘是从左到右布局中的右边缘、从上到下布局中的下边缘，依此类推。
|
例如，以下 ID 选择器已经添加了 -ms-flex-pack 属性并将其设置为 justify：
<style type="text/css">
#myFlexbox
{
display: -ms-flexbox;
-ms-flex-pack: justify;
background: grey;
border: blue;
}
</style>
启用子元素自动换行
可以通过使用如下属性来启用溢出的 Flexbox 子元素自动换行到下一行以及控制流动方向：
| 属性 | 描述 |
|---|---|
|
-ms-flex-wrap |
指定是否根据对象中的可用空间将子元素包装到多个行或列上。
此属性的可能值包括以下关键字：
|
请注意 Internet Explorer 10 将尝试通过将所有框收缩到其最小尺寸，尽可能使子元素在父框中位于最少的行数上。在单个行中无法容纳的单个元素将在该行的结尾被截断。
按照默认设置，其他行将沿着分块方向添加。在从左到右和从右到左布局中，新行被添加到现有行的下面（除非已在别处明确指定了从上到下的分块方向）。同样，新行是出现在垂直布局的右侧还是左侧具体取决于分块方向，而分块方向可能是从左到右或从右到左，具体取决于书写方向或其他特定设置。
例如，以下 ID 选择器已经添加了 -ms-flex-wrap 属性并将其设置为 wrap：
<style type="text/css">
#myFlexbox
{
display: -ms-flexbox;
-ms-flex-wrap: wrap;
background: grey;
border: blue;
}
</style>
添加 Flexbox 子元素
既然你已创建了 Flexbox 容器，就可以在其中添加子元素。要将子元素添加到 Flexbox 容器中，须使该元素成为 Flexbox 元素的直接子元素，如以下标记中所示：
<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。
|
分组 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"
<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
flexbox