css3 flexbox弹性布局 – CSS3高级教程 css3flexbox布局|CSS

上一章CSS3高级教程请查看：css3框大小box-sizing
CSS3弹性盒(flexbox或flexble box)是一种新的布局模型，用于创建更灵活的用户界面设计。
理解Flex布局模型Flexible box，通常称为flexbox，是CSS3中引入的一种新的布局模型，用于创建具有多行和多列的灵活用户界面设计，而不使用百分比或固定长度值。CSS3 flex布局模型提供了一种简单而强大的机制，可以通过样式表自动处理空间分布和内容对齐，而不会干扰实际的标记。
下面的示例演示如何使用flex布局模型创建一个三列布局，其中每一列的宽度和高度相等。

< !DOCTYPE html> < html lang="en"> < head> < meta charset="utf-8"> < title>CSS3 Three Equal Flex Column< /title> < style> .flex-container { width: 80%; min-height: 300px; display: -webkit-flex; /* Safari */ display: flex; /* Standard syntax */ border: 1px solid #808080; } .flex-container div { background: #dbdfe5; -webkit-flex: 1; /* Safari */ -ms-flex: 1; /* IE 10 */ flex: 1; /* Standard syntax */ } < /style> < /head> < body> < div class="flex-container"> < div class="item1">Item 1< /div> < div class="item2">Item 2< /div> < div class="item3">Item 3< /div> < /div> < /body> < /html>

如果你仔细注意上面的示例代码，你会发现我们没有在.flex-container的内部< div>上指定任何宽度，但是你可以在输出中看到，每一列的宽度正好等于父元素.flex-container的三分之一。
Flex布局如何工作？Flexbox由flex容器和flex项组成。可以通过将元素的display属性设置为flex(生成块级flex容器)或inline-flex(生成类似于内联块的内联flex容器)来创建flex容器。flex容器的所有子元素都自动成为flex项，并使用flex布局模型进行布局。浮动float、清除clear和垂直对齐vertical-align属性对flex项没有影响。
Flex项被放置在一个Flex容器中，沿着Flex线由Flex -direction属性控制。默认情况下，每个flex容器只有一个flex行，它的方向与当前写入模式或文本方向的内联轴相同。下面的插图将帮助您理解flex布局术语。

文章图片
控制伸缩容器内的流在标准的CSS框模型中，元素通常按照它们在底层HTML标记中出现的顺序显示。Flex布局允许您控制一个Flex容器内的流的方向，这样一来，元素就可以按照向左、向右、向下甚至向上的任何流方向进行布局。
可以使用flex-direction属性指定flex容器中的flex项的流。这个属性的默认值是row，它与文档当前的书写模式或文本方向相同，例如，在英语中是从左到右。

.flex-container { width: 80%; min-height: 300px; /* Safari */ display: -webkit-flex; -webkit-flex-direction: row-reverse; /* Standard syntax */ display: flex; flex-direction: row-reverse; border: 1px solid #666; }

【css3 flexbox弹性布局 – CSS3高级教程】同样，你可以将flex容器内的flex项以列的形式显示出来，而不是使用flex-direction属性的value列作为行，就像这样

.flex-container { width: 80%; min-height: 300px; /* Safari */ display: -webkit-flex; -webkit-flex-direction: column; /* Standard syntax */ display: flex; flex-direction: column; }

控制伸缩项的尺寸flex布局最重要的方面是flex项能够改变它们的宽度或高度来填充可用空间，这是通过flex属性实现的，它是flex-grow、flex-shrink和flex-basis属性的简写。
伸缩容器将空闲空间按伸缩伸缩因子的比例分配给它的项，或者按伸缩伸缩因子的比例收缩它们以防止溢出。

.flex-container { width: 80%; min-height: 300px; display: -webkit-flex; /* Safari */ display: flex; /* Standard syntax */ } .flex-container div { padding: 10px; background: #dbdfe5; } .item1, .item3 { -webkit-flex: 1; /* Safari */ flex: 1; /* Standard syntax */ } .item2 { -webkit-flex: 2; /* Safari */ flex: 2; /* Standard syntax */ }

在上面的例子中，第一个和第三个伸缩项目将占用1/4，即1/(1+1+2)的自由空间，而第二个伸缩项目将占用1/2，即2/(1+1+2)的自由空间。类似地，你可以使用这个简单的技术创建其他灵活的布局。
注意: 强烈建议使用简写而不是单独的flex属性，因为它可以正确地重置未指定的组件。
在伸缩容器内对齐伸缩项有四个属性，分别是justify-content, align-content, align-items 和 align-self ，它们被设计用来控制伸缩容器中伸缩项的对齐，前三个应用于flex容器，而最后一个应用于各个flex项目。
沿主轴对齐伸缩项目可以使用justify-content属性沿着伸缩容器的主轴(即水平方向)对齐伸缩项，通常在flex项没有使用主轴上所有可用空间时使用。
justify-content接受下列值：

flex-start – 默认值。伸缩项放置在主轴的开头。
Flex -end – Flex项放置在主轴的末端。
center – 伸缩项目放置在主轴的中心，两端有相等的自由空间。如果剩余的自由空间是负的，即如果项目溢出，那么flex项目将在两个方向上均匀溢出。
space-between – 伸缩项之间的空格沿主轴均匀分布，其中第一项位于主起始边，最后一项位于主末端。如果项溢出或只有一个项，则此值等于flex-start。
space-around– Flex项目均匀分布与半大小的空间在两端。如果它们溢出或只有一个项，则此值与center相同。

下面的示例将向你展示在具有固定宽度的多列伸缩容器上，justify-content属性的不同值的影响。

.flex-container { width: 500px; min-height: 300px; border: 1px solid #666; /* Safari */ display: -webkit-flex; -webkit-justify-content: space-around; /* Standard syntax */ display: flex; justify-content: space-around; } .item1 { width: 75px; background: #e84d51; } .item2 { width: 125px; background: #7ed636; } .item3 { width: 175px; background: #2f97ff; }

将伸缩项目沿横轴对齐使用align-items或align-self属性，可以沿着伸缩容器的横轴(即垂直方向)对伸缩项进行对齐。但是，在将校准项应用于伸缩容器的地方，align-self属性将应用于各个伸缩项，并覆盖align-items。这两个属性都接受以下值:

Flex -start – Flex项放置在交叉轴的开头。
Flex -end – Flex项放置在交叉轴的末端。
center – flex项目放置在十字轴的中心，两端有相等的自由空间。如果剩余的自由空间是负的，即如果项目溢出，那么flex项目将在两个方向上均匀溢出。
baseline ——每个flex项目的文本基线(或内联轴)与font-size的flex项目的基线对齐。
stretch — flex项伸缩以填充当前行或列，除非受到最小和最大宽度或高度的限制。属性的默认值是align-items。

下面的示例将向你展示具有固定高度的多列伸缩容器上的align-items属性的不同值的效果。

.flex-container { width: 500px; min-height: 300px; border: 1px solid #666; /* Safari */ display: -webkit-flex; -webkit-align-items: center; /* Standard syntax */ display: flex; align-items: center; } .item1 { width: 75px; height: 100px; background: #e84d51; } .item2 { width: 125px; height: 200px; background: #7ed636; } .item3 { width: 175px; height: 150px; background: #2f97ff; }

你还可以在多行或多列伸缩容器的横轴上分配空闲空间。属性align-content用于对齐伸缩容器的行，例如，当横轴中有额外的空间时，就会对齐多行伸缩容器中的行，这与justify-content对齐主轴中的各个项目的方式类似。
align-content属性接受与justify-content相同的值，但将它们应用于横轴而不是主轴。它还接受另一种值:

stretch – 拉伸所有行或列之间的空闲空间，增加它们的交叉大小。如果剩余的自由空间是负的，这个值就等于flex-start。

下面的示例将向你展示在具有固定高度的多行伸缩容器上，align-content属性的不同值的影响。

.flex-container { width: 500px; min-height: 300px; margin: 0 auto; font-size: 32px; border: 1px solid #666; /* Safari */ display: -webkit-flex; -webkit-flex-flow: row wrap; -webkit-align-content: space-around; /* Standard syntax */ display: flex; flex-flow: row wrap; align-content: space-around; } .flex-container div { width: 150px; height: 100px; background: #dbdfe5; }

重新排序各个Flex项目除了更改flex容器内的流之外，你还可以更改使用order属性显示单个flex项的顺序。此属性接受正整数或负整数作为值。默认情况下，所有的flex项目都是按照它们在HTML标记中出现的顺序显示和布局的，因为默认的顺序值order是0。
下面的示例将向你展示如何控制单个flex项目的顺序。

.flex-container { width: 500px; min-height: 300px; border: 1px solid #666; display: -webkit-flex; /* Safari 6.1+ */ display: flex; } .flex-container div { padding: 10px; width: 130px; } .item1 { background: #e84d51; -webkit-order: 2; /* Safari 6.1+ */ order: 2; } .item2 { background: #7ed636; -webkit-order: 1; /* Safari 6.1+ */ order: 1; } .item3 { background: #2f97ff; -webkit-order: -1; /* Safari 6.1+ */ order: -1; }

注意: 具有最低阶值的项目放在最前面，而具有最高阶值的项目放在最后。具有相同订单值的项以相同的顺序显示—它们出现在源文档中。
Flexbox 水平和垂直中心对齐通常，内容块的垂直对齐需要使用JavaScript或一些丑陋的CSS技巧，但是使用flexbox，你可以很容易做到这一点，不需要任何调整。
下面的示例将向你展示如何使用CSS3灵活的box特性在中间轻松地垂直和水平对齐内容块。

.flex-container { width: 500px; min-height: 300px; border: 1px solid #666; display: -webkit-flex; /* Safari 6.1+ */ display: flex; /* Standard syntax */ } .item { width: 300px; padding: 25px; margin: auto; background: #f0e68c; }

启用Flex项的包装默认情况下，flex容器只显示一行或一列的flex项。但是，你可以使用flex容器上的flex-wrap属性来控制它的flex项是否会被包装成多行，如果在一个flex行上没有足够的空间容纳它们的话。
flex-wrap属性接受以下值:

nowrap—默认值。flex项放在一行中。如果在伸缩线上没有足够的空间，可能会导致溢出。
wrap——flex容器将其flex项分解为多行，类似于当文本太宽而无法容纳当前行时，如何将其分解为新行。
wrap-reverse —— 反向-如有必要，flex项目将包装，但以相反的顺序，即交叉开始和交叉结束方向互换。

下面的示例将向你展示如何使用flex-wrap属性在flex容器中的单个或多个行中显示flex项。

.flex-container { width: 500px; min-height: 300px; border: 1px solid #666; /* Safari */ display: -webkit-flex; -webkit-flex-wrap: wrap; /* Standard syntax */ display: flex; flex-wrap: wrap; } .flex-container div{ width: 130px; padding: 10px; background: #dbdfe5; }

注意: 还可以使用缩写的CSS属性flex-flow在单个声明中设置flex方向和flex-wrap。它接受与单个属性相同的值，这些值可以是任意顺序的。