Qui-Note官网Logo
导航:Qui-Note/column

column

flex弹性布局实现:元素竖排,水平垂直居中排版

<style type="text/css"> 
			.box1{
				display:flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			} 
			.item{
				width: 500px;
				height: 500px;
				border: 1px solid #111;
			}
			.item span{width: 80px;height: 80px;background: #999;color: #fff;text-align: center;line-height:80px;}
			.item span:nth-of-type(even){background: #333;}
        </style>
        <div class="box1 item">
        	<span>1</span>
        	<span>2</span>
        	<span>3</span>
        	<span>4</span>
        </div>

效果展示:

1 2 3 4
X
馊稀饭 赞助了 陈小知 9.99
太阳 赞助了 陈小知 18.8
fonhen 赞助了 陈小知 8.76
admin 赞助了 陈小知 6.90
Tiger 赞助了 陈小知 9.90
cznq1106 赞助了 陈小知 9.90
459977099 赞助了 陈小知 9.90
2910224190 赞助了 陈小知 9.90