Untitled

dabblet.css

.item {	
	display: box;
	height: 300px;	
	/*设置伸缩盒对象的子元素从上到下纵向排列*/
	/*box-orient: vertical;*/ 
	/*简单说就是垂直排列*/	
	/*设置伸缩盒对象的子元素从左到右水平排列*/
	box-orient: horizontal; /*简单说就是水平排列*/
	
	/*子元素从开始位置对齐*/
	/*box-pack: start;*/ /*一般来说是左对齐*/
	/*子元素居中对齐*/
	/*box-pack: center;*/
	/*子元素从结束位置对齐*/
	/*box-pack: end;*/ /*一般来说是右对齐*/
	/*子元素两端对齐*/
	box-pack: justify; /*子元素左右两端对齐，中间间隔距离平分*/
	
	/*
	box-orient: inline-axis;
	direction: rtl;
	*/
}
.list {	
    background-color: gold;
    width: 60px;
}
.list:nth-child(1) {	
    background-color: #445566;
}
.list:nth-child(2) {	
    background-color: #556677;
}
.list:nth-child(3) {	
    background-color: #667788;
}

dabblet.html

<div class="item">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}