移動端彈性布局flex，CSS3自适應

一、Flex布局

今天整理了一些關于Flex布局，參考了好多大神的傑作

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

任何一個容器都可以指定為Flex布局。

.box{
  display: flex;
}
           

行内元素也可以使用Flex布局。

.box{
  display: inline-flex;
}
           

Webkit核心的浏覽器，必須加上-webkit字首。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}
           

注意，設為Flex布局以後，子元素的float、clear和vertical-align屬性将失效。

二、基本概念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

[外鍊圖檔轉存失敗(img-RRTXDeW1-1564145870108)(E:\Word\JACK\筆記\flex.assets\3791e575c48b3698be6a94ae1dbff79d.png)]

容器預設存在兩根軸：水準的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目預設沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

三、容器的屬性

容器的屬性//以下6個屬性設定在容器上。
flex-direction	屬性規定靈活項目的方向
flex-wrap	屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
flex-flow	符合屬性（flex-direction flex-wrap）
justify-content	用于設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式
align-items	屬性定義flex子項在flex容器的目前行的側軸（縱軸）方向上的對齊方式。
align-content	屬性在彈性容器内的各項沒有占用交叉軸上所有可用的空間時對齊容器内的各項（垂直）。

項目的屬性//以下6個屬性設定在項目上。
align-self	屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。
flex-grow	屬性定義項目的放大比例，預設為0，即如果存在剩餘空間，也不放大
order	屬性定義項目的排列順序。數值越小，排列越靠前，預設為0。
flex-shrink	屬性定義了項目的縮小比例，預設為1，即如果空間不足，該項目将縮小。
flex-basis	屬性定義了在配置設定多餘空間之前，項目占據的主軸空間（main size）。浏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即項目的本來大小。
flex	屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

flex-direction //屬性規定靈活項目的方向

flex-direction	屬性規定靈活項目的方向
row	預設值。靈活的項目将水準顯示，正如一個行一樣。
row-reverse	與 row 相同，但是以相反的順序。
column	靈活的項目将垂直顯示，正如一個列一樣。
column-reverse	與 column 相同，但是以相反的順序。
initial	設定該屬性為它的預設值。請參閱 initial。
inherit	從父元素繼承該屬性。請參閱 inherit。

flex-wrap //屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。

flex-wrap	屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
nowrap	預設值。規定靈活的項目不拆行或不拆列。
wrap	規定靈活的項目在必要的時候拆行或拆列。
wrap-reverse	規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。
initial	設定該屬性為它的預設值。請參閱 initial。
inherit	從父元素繼承該屬性。請參閱 inherit。

justify-content //用于設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式

justify-content	用于設定或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式
flex-start	預設值。項目位于容器的開頭。		測試 »
flex-end	項目位于容器的結尾。		測試 »
center	項目位于容器的中心。		測試 »
space-between	項目位于各行之間留有空白的容器内。		測試 »
space-around	項目位于各行之前、之間、之後都留有空白的容器内。		測試 »
initial	設定該屬性為它的預設值。請參閱 initial。	測試 »
inherit	從父元素繼承該屬性。請參閱 inherit。

align-items //屬性定義flex子項在flex容器的目前行的側軸（縱軸）方向上的對齊方式。

align-items	屬性定義flex子項在flex容器的目前行的側軸（縱軸）方向上的對齊方式。
stretch	預設值。元素被拉伸以适應容器。如果指定側軸大小的屬性值為’auto’，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照’min/max-width/height’屬性的限制。		測試 »
center	元素位于容器的中心。彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。		測試 »
flex-start	元素位于容器的開頭。彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。		測試 »
flex-end	元素位于容器的結尾。彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。		測試 »
baseline	元素位于容器的基線上。如彈性盒子元素的行内軸與側軸為同一條，則該值與’flex-start’等效。其它情況下，該值将參與基線對齊。		測試 »
initial	設定該屬性為它的預設值。請參閱 initial。	測試 »
inherit	從父元素繼承該屬性。請參閱 inherit。

align-content //屬性在彈性容器内的各項沒有占用交叉軸上所有可用的空間時對齊容器内的各項（垂直）。

align-content	屬性在彈性容器内的各項沒有占用交叉軸上所有可用的空間時對齊容器内的各項（垂直）。
stretch	預設值。元素被拉伸以适應容器。各行将會伸展以占用剩餘的空間。如果剩餘的空間是負數，該值等效于’flex-start’。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。		測試 »
center	元素位于容器的中心。各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始内容邊界和第一行之間的距離與該容器的側軸結束内容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）		測試 »
flex-start	元素位于容器的開頭。各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行。		測試 »
flex-end	元素位于容器的結尾。各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之後的每一行都緊靠住前面一行。		測試 »
space-between	元素位于各行之間留有空白的容器内。各行在彈性盒容器中平均分布。如果剩餘的空間是負數或彈性盒容器中隻有一行，該值等效于’flex-start’。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始内容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束内容邊界，剩餘的行則按一定方式在彈性盒視窗中排列，以保持兩兩之間的空間相等。		測試 »
space-around	元素位于各行之前、之間、之後都留有空白的容器内。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中隻有一行，該值等效于’center’。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。		測試 »
initial	設定該屬性為它的預設值。請參閱 initial。	測試 »
inherit	從父元素繼承該屬性。請參閱 inherit。

align-self //屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。

align-self	屬性定義flex子項單獨在側軸（縱軸）方向上的對齊方式。
auto	預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 “stretch”。	測試 »
stretch	元素被拉伸以适應容器。如果指定側軸大小的屬性值為’auto’，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照’min/max-width/height’屬性的限制。	測試 »
center	元素位于容器的中心。彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。	測試 »
flex-start	元素位于容器的開頭。彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。	測試 »
flex-end	元素位于容器的結尾。彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。	測試 »
baseline	元素位于容器的基線上。如彈性盒子元素的行内軸與側軸為同一條，則該值與’flex-start’等效。其它情況下，該值将參與基線對齊。	測試 »
initial	設定該屬性為它的預設值。請參閱 initial。	測試 »
inherit	從父元素繼承該屬性。請參閱 inherit。

flex-grow //屬性用于設定或檢索彈性盒子的擴充比率。

flex-grow	屬性用于設定或檢索彈性盒子的擴充比率。
number	一個數字，規定項目将相對于其他靈活的項目進行擴充的量。預設值是 0。
initial	設定該屬性為它的預設值。請參閱 initial。
inherit	從父元素繼承該屬性。請參閱 inherit。

order 屬性 設定或檢索彈性盒模型對象的子元素出現的順序。

order	屬性 設定或檢索彈性盒模型對象的子元素出現的順序。
number	預設值是 0。規定靈活項目的順序。
initial	設定該屬性為它的預設值。請參閱 initial。
inherit	從父元素繼承該屬性。請參閱 inherit。

例子：

<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Web的Flex彈性盒模型</title>
<style>
	body{
		font-family: '微軟雅黑';
		/*font-family: cursive, '微軟雅黑';*/
		padding: 0;
		margin: 20px 0 40px;

		font-size: 16px;
		background-color: #F9F9F9;
	}
	h1{
		color: #0BF;
		text-indent: 15px;
	}
	h3{
		color: #6D7273;
		text-indent: 15px;
		padding: 10px 0;
		background-color: #fff;
	}
	p{
		margin: 0;
		padding: 0;
		color: #666;
		margin-bottom: 5px;
	}

	.boxes{
		padding: 0 10px;
		overflow: hidden;
		display: -webkit-flex;
		flex-wrap: wrap;
		align-content:flex-start
	}
	.box{
		width: 400px;
		padding: 8px;
		margin-right: 20px;
		margin-bottom: 10px;
		display: inline-block;
		box-shadow: 2px 2px 3px 1px #E0E0E0;
	}

	.boxstyle{
		padding: 8px 0;
	}
	.boxborder{
		border: 1px dashed #B6B6B6;
	}
	.demo{
		color: #fff;
		display: -webkit-flex;
		text-align: center;
	}
	.demo .item{
		line-height: 40px;
		background-color: #ddd;
	}
	.demo .item:nth-child(1){
		background-color: #E46C49;
	}
	.demo .item:nth-child(2){
		background-color: #37B0D3;
	}
	.demo .item:nth-child(3){
		background-color: #68B33D;
	}
	.demo .item:nth-child(4){
		background-color: #E46775;
	}
	.demo .item:nth-child(5){
		background-color: #CFC731;
	}
	.demo .item:nth-child(6){
		background-color: #8370F4;
	}

	.demo .item span{
		display: block;
	}

	.demo2 .item{
		height: 60px;
		width: 150px;
		word-wrap: break-word;
		line-height: 1.5;
	}

	.demo-row{
		flex-direction: row;
	}
	.demo-row-reverse{
		flex-direction: row-reverse;
	}
	.demo-column{
		height: 200px;
		flex-direction: column;
	}
	.demo-column-reverse{
		height: 200px;
		flex-direction: column-reverse;
	}

	.demo-nowrap{
		-webkit-flex-wrap: nowrap;
		width: 400px;
	}
	.demo-wrap{
		-webkit-flex-wrap: wrap;
		width: 400px;
	}
	.demo-wrap-reverse{
		-webkit-flex-wrap: wrap-reverse;
		width: 400px;
	}
	.demo-align-content{
		width: 400px;
		flex-wrap: wrap;
		height:200px;
		border: 1px dashed #B6B6B6;
	}
	.demo-align-content .item:nth-child(1), .demo-align-content .item:nth-child(2), .demo-align-content .item:nth-child(3),
	.demo-align-content .item:nth-child(4), .demo-align-content .item:nth-child(5), .demo-align-content .item:nth-child(6){
		background-color: #717171;
		width: 80px;
		margin: 2px 10px;
	}

</style>
</head>
<body>
	<h1>Web的Flex彈性盒模型</h1>
	<section class="content">

		<h3>[ flex ]</h3>
		<div class="boxes">
			<div class="box">
				<div class="boxstyle">
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo1">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="flex:2">flex: 2;</div>
					<div class="item" style="flex:1">flex: 1;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>display: -webkit-flex; </p>
				</div>
				<div class="demo demo2 boxborder">
					<div class="item" style="margin-right:10px;">
						<span>width:150px;</span> <span>margin-right:10px;</span></div>
					<div class="item" style="flex:1">flex: 1;</div>
					<div class="item" style="margin-left:10px;">
						<span>width:150px;</span> <span>margin-left:10px;</span></div>
				</div>
			</div>
		</div>

		<h3>[ flex-direction ]</h3>
		<div class="boxes" style="width:900px">
			<div class="box">
				<div class="boxstyle">
					<p>flex-direction: row; /*default*/</p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-row">
					<div class="item" style="flex:1">flex: 1;</div>
					<div class="item" style="flex:2">flex: 2;</div>
					<div class="item" style="flex:3">flex: 3;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>flex-direction: row-reverse;</p>
					<p>display: -webkit-flex; </p>
				</div>
				<div class="demo demo-row-reverse">
					<div class="item" style="flex:1">flex: 1;</div>
					<div class="item" style="flex:2">flex: 2;</div>
					<div class="item" style="flex:3">flex: 3;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>flex-direction: column;</p>
					<p>display: -webkit-flex; </p>
				</div>
				<div class="demo demo-column">
					<div class="item" style="flex:1">flex: 1;</div>
					<div class="item" style="flex:2">flex: 2;</div>
					<div class="item" style="flex:3">flex: 3;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>flex-direction: column-reverse;</p>
					<p>display: -webkit-flex; </p>
				</div>
				<div class="demo demo-column-reverse">
					<div class="item" style="flex:1">flex: 1;</div>
					<div class="item" style="flex:2">flex: 2;</div>
					<div class="item" style="flex:3">flex: 3;</div>
				</div>
			</div>
		</div>

		<h3>[ flex-wrap ]</h3>
		<div class="boxes" style="width:1310px">
			<div class="box">
				<div class="boxstyle">
					<p>-webkit-flex-wrap: nowrap; /* default */</p>
					<p>display: -webkit-flex; </p>
					<p>width: 400px</p>
				</div>
				<div class="demo demo-nowrap">
					<div class="item" style="width: 100px">100px;</div>
					<div class="item" style="width: 200px">width: 200px;</div>
					<div class="item" style="width: 300px">width: 300px;</div>
				</div>
			</div>
			<div class="box">
				<div class="boxstyle">
					<p>-webkit-flex-wrap: wrap</p>
					<p>display: -webkit-flex; </p>
					<p>width: 400px</p>
				</div>
				<div class="demo demo-wrap boxborder">
					<div class="item" style="width: 100px">100px;</div>
					<div class="item" style="width: 200px">width: 200px;</div>
					<div class="item" style="width: 300px">width: 300px;</div>
				</div>
			</div>
			<div class="box">
				<div class="boxstyle">
					<p>-webkit-flex-wrap: wrap-reverse</p>
					<p>display: -webkit-flex; </p>
					<p>width: 400px</p>
				</div>
				<div class="demo demo-wrap-reverse boxborder">
					<div class="item" style="width: 100px">100px;</div>
					<div class="item" style="width: 200px">width: 200px;</div>
					<div class="item" style="width: 300px">width: 300px;</div>
				</div>
			</div>	
		</div>

		<h3>[ flex-flow ]: flex-direction flex-wrap; /* 自個體會吧 */</h3>

		<h3>[ justify-content ]</h3>
		<div class="boxes" style="width:1310px;">
			<div class="box">
				<div class="boxstyle">
					<p>/* 效果如同 float:left; */</p>
					<p>justify-content: flex-start; /* default */</p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo boxborder" style="justify-content: flex-start;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p><p>/* 效果如同 float:right; */</p></p>
					<p>justify-content: flex-end;</p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-justify boxborder"  style="justify-content: flex-end;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>/* 第三代水準居中方案 */</p>
					<p>justify-content: center;</p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-justify-end boxborder" style="justify-content: center;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>justify-content: space-between; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-justify boxborder" style="justify-content: space-between;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>justify-content: space-around; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-justify-end boxborder" style="justify-content: space-around;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>
		</div>

		<h3>[ align-self ]</h3>
		<div class="boxes">
			<div class="box" style="width:1000px;">
				<div class="boxstyle">
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo boxborder" style="width: 1000px; height:200px;">
					<div class="item" style="width:200px; align-self:flex-start;">align-self:flex-start;</div>
					<div class="item" style="width:200px; align-self:flex-end;">align-self:flex-end;</div>
					<div class="item" style="width:200px; align-self:center;">align-self:center;</div>
					<div class="item" style="width:200px; align-self:auto;">
						<span>align-self:auto;</span>
						<span>/*default */</span>
					</div>

					<div class="item" style="width:200px; align-self:baseline;">align-self:baseline;</div>
					<div class="item" style="width:200px; align-self:stretch;">align-self:stretch;</div>
				</div>
			</div>
		</div>

		<h3>[ align-items ]</h3>
		<div class="boxes">
			<div class="box">
				<div class="boxstyle">
					<p>align-items: flex-start; /* default */</p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo boxborder" style="align-items: flex-start;height:200px;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>align-items: flex-end; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo boxborder" style="align-items: flex-end;height:200px;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>/* 第三代垂直居中 */</p>
					<p>align-items: center; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo boxborder" style="align-items: center;height:200px;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>align-items: baseline; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo boxborder" style="align-items: baseline;height:200px;">
					<div class="item" style="width:100px">width:100px;</div>
					<div class="item" style="width:100px">width:100px;</div>
				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>align-items: stretch; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo boxborder" style="align-items: stretch;height:200px;">
					<div class="item" style="width:100px; height:100px;">height:100px;</div>
					<div class="item" style="width:150px; min-height:20px;">min-height:20px;</div>
					<div class="item" style="width:150px; max-height:60px;">max-height:60px;</div>
				</div>
			</div>
		</div>


		<h3>[ align-content ]</h3>
		<div class="boxes">
			<div class="box">
				<div class="boxstyle">
					<p>/* <span style="color:red"> 對比 align-items</span>*/</p>
					<p>align-items: flex-start</p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="align-items: flex-start">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" >d</div>
					<div class="item" >e</div>
					<div class="item" >f</div>

				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>align-content: flex-start; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="align-content: flex-start;">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" >d</div>
					<div class="item" >e</div>
					<div class="item" >f</div>

				</div>
			</div>

			<div class="box">
				<div class="boxstyle">
					<p>align-content: flex-end; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="align-content: flex-end;">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" >d</div>
					<div class="item" >e</div>
					<div class="item" >f</div>

				</div>
			</div>
			<div class="box">
				<div class="boxstyle">
					<p>align-content: center; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="align-content: center;">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" >d</div>
					<div class="item" >e</div>
					<div class="item" >f</div>

				</div>
			</div>
			<div class="box">
				<div class="boxstyle">
					<p>align-content: space-between; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="align-content: space-between;">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" >d</div>
					<div class="item" >e</div>
					<div class="item" >f</div>
				</div>
			</div>
			<div class="box">
				<div class="boxstyle">
					<p>align-content: space-around; </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="align-content: space-around;">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" >d</div>
					<div class="item" >e</div>
					<div class="item" >f</div>

				</div>
			</div>		

			<div class="box">
				<div class="boxstyle">
					<p>align-content: stretch; /*default*/ </p>
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="align-content: stretch;">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" >d</div>
					<div class="item" >e</div>
					<div class="item" >f</div>

				</div>
			</div>	
	
		</div>	

		<h3>[ order ]</h3>
		<div class="boxes">
			<div class="box" style="width:1000px;">
				<div class="boxstyle">
					<p>display: -webkit-flex;</p>
				</div>
				<div class="demo demo-align-content" style="width: 1000px;height:40px;">
					<div class="item" >a</div>
					<div class="item" >b</div>
					<div class="item" >c</div>
					<div class="item" style="order:-1; width:120px"> d (order:-1) </div>
					<div class="item" >e</div>
					<div class="item" >f</div>
				</div>
			</div>
		</div>

	</section>
	

</body>
</html>