<template>
  <div class="page-badge">
    <!-- <div class="page-title">Badge</div> -->
    <co-header fixed title="界面布局">
			<fallback slot="left"></fallback>
    </co-header>
	<div style="padding-top:44px">
		<h4 class="">元素以1:1:1的比例水平布局</h4>
		<div class="co-flex" style="height:2rem;background:#000">
			<div class="co-f1" style="background:red">左边内容</div>
			<div class="co-f1" style="background:yellow">中间内容</div>
			<div class="co-f1" style="background:blue">右边内容</div>
		</div>
		<h4 class="co-cl-1">元素以固定值和比例值水平布局</h4>
		<div class="co-flex" style="height:2rem;background:#000">
			<div class="" style="background:red;width:4rem">左边内容</div>
			<div class="co-f1" style="background:yellow">中间内容</div>
			<div class="" style="background:blue;width:6rem">右边内容</div>
		</div>
		<h4 class="co-cl-1">元素以1:1:1的比例垂直方向布局</h4>
		<div class="co-flex co-ver" style="height:8rem;background:#000">
			<div class="co-f1" style="background:red">上边内容</div>
			<div class="co-f1" style="background:yellow">中间内容</div>
			<div class="co-f1" style="background:blue">底部内容</div>
		</div>

		<h4 class="co-cl-1">元素以固定值和比例垂直方向布局</h4>
		<div class="co-flex co-ver" style="height:8rem;background:#000">
			<div class="" style="background:red;height:2rem">上边内容</div>
			<div class="co-f1" style="background:yellow">中间内容</div>
			<div class="co-f2" style="background:blue">底部内容</div>
		</div>

		<h4 class="co-cl-1">元素以1:1:1的比例水平方向反向布局</h4>
		<div class="co-flex co-x-revR" style="height:8rem;background:#000">
			<div class="co-f1" style="background:red;">左边内容</div>
			<div class="co-f1" style="background:yellow">中间内容</div>
			<div class="co-f1" style="background:blue;">右边内容</div>
		</div>

		<h4 class="co-cl-1">元素以1:1:1的比例垂直方向反向布局</h4>
		<div class="co-flex co-ver co-y-revR" style="height:8rem;background:#000">
			<div class="co-f1" style="background:red;">上边内容</div>
			<div class="co-f1" style="background:yellow">中间内容</div>
			<div class="co-f1" style="background:blue">底部内容</div>
		</div>

		<h4 class="co-cl-1">元素以1:1:1比例垂直居中排列</h4>
		<div class="co-flex co-ac" style="height:8rem;background:#000">
			<div class="co-f1" style="background:red;height:2rem">左边内容</div>
			<div class="co-f1" style="background:yellow;height:2rem">中间内容</div>
			<div class="co-f1" style="background:blue;height:2rem">右边内容</div>
		</div>

		<h4 class="co-cl-1">元素以1:1:1比例垂直居底部排列</h4>
		<div class="co-flex co-ae" style="height:8rem;background:#000">
			<div class="co-f1" style="background:red;height:2rem">左边内容</div>
			<div class="co-f1" style="background:yellow;height:2rem">中间内容</div>
			<div class="co-f1" style="background:blue;height:2rem">右边内容</div>
		</div>

		<h4 class="co-cl-1">子元素水平居中排列</h4>
		<div class="co-flex co-jc" style="height:8rem;background:#000">
			<div class="" style="background:red;height:2rem">左边内容</div>
			<div class="" style="background:yellow;height:2rem">右边内容</div>
		</div>

		<h4 class="co-cl-1">子元素水平居右排列</h4>
		<div class="co-flex co-je" style="height:8rem;background:#000">
			<div class="" style="background:red;height:2rem">左边内容</div>
			<div class="" style="background:yellow;height:2rem">右边内容</div>
		</div>

		<h4 class="co-cl-1">子元素水平方向两端对齐排列</h4>
		<div class="co-flex co-jsb" style="height:8rem;background:#000">
			<div class="" style="background:red;height:2rem">左边内容</div>
			<div class="" style="background:yellow;height:2rem">中间内容</div>
			<div class="" style="background:blue;height:2rem">右边内容</div>
		</div>

		<h4 class="co-cl-1">子元素垂直方向两端对齐排列</h4>
		<div class="co-flex co-ver co-jsb" style="height:8rem;background:#000">
			<div class="" style="background:red;height:2rem">上边内容</div>
			<div class="" style="background:yellow;height:2rem">中间内容</div>
			<div class="" style="background:blue;height:2rem">右边内容</div>
		</div>

		<h4 class="co-cl-1">子元素水平方向以相同间距对齐排列</h4>
		<div class="co-flex co-jsa" style="height:8rem;background:#000">
			<div class="" style="background:red;height:2rem">左边内容</div>
			<div class="" style="background:yellow;height:2rem">中间内容</div>
			<div class="" style="background:blue;height:2rem">右边内容</div>
		</div>

		<h4 class="co-cl-1">子元素垂直方向以相同间距对齐排列</h4>
		<div class="co-flex co-ver co-jsa" style="height:8rem;background:#000">
			<div class="" style="background:red;height:2rem">上边内容</div>
			<div class="" style="background:yellow;height:2rem">中间内容</div>
			<div class="" style="background:blue;height:2rem">底部内容</div>
		</div>

		<h4 class="co-cl-1">子元素水平方向以等比例布局1:2:3:4:5</h4>
		<div class="co-flex" style="height:8rem;background:#000">
			<div class="co-f1" style="background:red;height:2rem">1</div>
			<div class="co-f2" style="background:yellow;height:2rem">2</div>
			<div class="co-f3" style="background:blue;height:2rem">3</div>
			<div class="co-f4" style="background:green;height:2rem">4</div>
			<div class="co-f5" style="background:#444;height:2rem">5</div>
		</div>

		<h4 class="co-cl-1">子元素垂直方向以等比例布局1:2:3:4:5</h4>
		<div class="co-flex co-ver" style="height:8rem;background:#000">
			<div class="co-f1" style="background:red;">1</div>
			<div class="co-f2" style="background:yellow;">2</div>
			<div class="co-f3" style="background:blue;">3</div>
			<div class="co-f4" style="background:green;">4</div>
			<div class="co-f5" style="background:#444;">5</div>
		</div>

		<h4 class="co-cl-1">子元素弹性布局且换行</h4>
		<div class="co-flex co-wp" style="background:#000;padding:.3rem 0">
			<div style="background:red;padding:0 .6rem;height:2rem;margin:0 .4rem">1</div>
			<div style="background:yellow;padding:0 1rem;height:2rem;margin:0 .4rem">2</div>
			<div style="background:blue;padding:0 .3rem;height:2rem;margin:0 .4rem">3</div>
			<div style="background:green;padding:0 .8rem;height:2rem;margin:0 .4rem">4</div>
			<div style="background:#444;padding:0 1.2rem;height:2rem;margin:0 .4rem">5</div>
			<div style="background:yellow;padding:0 .1rem;height:2rem;margin:0 .4rem">2</div>
			<div style="background:blue;padding:0 .3rem;height:2rem;margin:0 .4rem">3</div>
			<div style="background:green;padding:0 .8rem;height:2rem;margin:0 .4rem">4</div>
			<div style="background:#444;padding:0 1.2rem;height:2rem;margin:0 .4rem">5</div>
		</div>
	</div>
  </div>
</template>

<script>
export default {
};
</script>

<style lang="css">
	h4{padding:.8rem .1rem;font-size: 18px}
	/**定义伸缩盒子模型**/
	.co-flex{
		display: flex;
		display: -webkit-flex
	}
	/**定义垂直方向盒子模型**/
	.co-ver{
		flex-direction:column;
		-webkit-flex-direction:column;
	}
	/**盒子模型水平反向布局**/
	.co-x-revR{
		flex-direction: row-reverse;
		-webkit-flex-direction:row-reverse;
	}
	/**盒子模型垂直反向布局**/
	.co-y-revR{
		flex-direction: column-reverse;
		-webkit-flex-direction:column-reverse;
	}
	/**垂直居中**/
	.co-ac{
		align-items: center;
		-webkit-align-items:center;
	}
	/**垂直居下**/
	.co-ae{
		align-items: flex-end;
		-webkit-align-items:flex-end;
	}
	/**元素水平居中**/
	.co-jc{
		justify-content: center;
		-webkit-justify-content:center;
	}
	/**元素水平居右**/
	.co-je{
		justify-content: flex-end;
		-webkit-justify-content:flex-end;
	}
	/**元素两端对齐**/
	.co-jsb{
		justify-content:space-between;
		-webkit-justify-content:space-between;
	}
	/**元素以相同间距分配对齐**/
	.co-jsa{
		justify-content: space-around;
		-webkit-justify-content:space-around;
	}
	.co-wp{
		-webkit-flex-wrap:wrap;
		flex-wrap:wrap;
	}
	/**弹性盒子等分比例分配**/
	.co-f1{
		flex:1;
		-webkit-flex:1;
		position:relative;
	}
	.co-f2{
		flex:2;
		-webkit-flex:2;
		position:relative;
	}
	.co-f3{
		flex:3;
		-webkit-flex:3;
		position:relative;
	}
	.co-f4{
		flex:4;
		-webkit-flex:4;
		position:relative;
	}
	.co-f5{
		flex:5;
		-webkit-flex:5;
		position:relative;
	}

</style>
