弹性盒子

Posted 2020-08-17 祥福有梦想

 

flex-direction (适用于父类容器的元素上)

设置或检索伸缩盒对象的子元素在父容器中的位置。

语法

flex-direction: row | row-reverse | column | column-reverse

• row：横向从左到右排列（左对齐），默认的排列方式。
• row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
• column：纵向排列。
• row-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

CSS代码html代码

.box{
	display:-webkit-flex;
	display:flex;
	margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
	-webkit-flex-direction:row;
	flex-direction:row;
}
#box2{
	-webkit-flex-direction:row-reverse;
	flex-direction:row-reverse;
}
#box3{
	height:500px;
	-webkit-flex-direction:column;
	flex-direction:column;
}
#box4{
	height:500px;
	-webkit-flex-direction:column-reverse;
	flex-direction:column-reverse;
}

flex-direction示例：

flex-direction:row

• a
• b
• c

flex-direction:row-reverse

• a
• b
• c

flex-direction:column

• a
• b
• c

flex-direction:column-reverse

• a
• b
• c

 

http://caibaojian.com/demo/flexbox/flex-direction.html 借鉴