弹性盒子布局
简单介绍一下弹性盒子布局：父级盒子可以有多个子盒子，弹性盒子只定义了子元素如何布局，不影响盒子内外的渲染；在父级定义该父级为弹性盒子，父级内的子级盒子全在一行显示，影响只是布局，见代码：
-
*{ -
margin: 0; -
padding: 0; -
} -
.big{ -
display: flex; -
} -
.big>div{ -
width: 200px; -
height: 100px; -
background: red; -
} -
</style> -
</head> -
<body> -
<div class="big"> -
<div>列1</div> -
<div>列2</div> -
<div>列3</div> -
<div>列4</div> -
<div>列5</div> -
<div>列6</div> -
</div>
简单的定义为弹性盒子；上面代码默认是从左到右进行排列；
也可以修改从右到左排列；只要设置direction：rtl页面布局也就跟着变；
-
.big{ -
display: flex; -
direction: rtl; -
}
请欣赏页面布局的效果：
flex-direction属性：顺序指定了弹性子元素在父容器中的位置；
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
- row：横向从左到右排列（左对齐），默认的排列方式。
- row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。{反序排列；}
- column：纵向排列。
- column-reverse：反转纵向排列，从后往前排，最后一项排在最上面{反向纵向排列}
-
.big{ -
display: flex; -
flex-direction: row-reverse; -
}//产生的效果与diretion相同；
反向纵向排列：
-
.big{ -
display: flex; -
flex-direction: column-reverse; -
}
看效果图：
最低0.47元/天 解锁文章
9688
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
