213 次浏览【转载需注明来源】
弹性布局和块布局类似。但是它缺少一些可用于块布局的属性,比如使用与弹性布局的元素将不再支持浮动、清除浮动等;虽然弹性布局不支持了一些属性,但作为回报,它获得了支持复杂Web页面经常需要的,用于分配空间和调整内容的强大能力;例如说:弹性布局支持垂直居中、水平居中、横向布局、纵向布局、均匀分配空间等~
特性: 可以被摆放在上下左右任何方向,可以弹性调整大小来适配可用空间。
原理:弹性布局等优势就在于其弹性调整大小上,我们可以使用弹性布局优雅的进行空间大小的分配;使用弹性布局首先必须要给父盒子设置显示模式:弹性布局;然后才可以进行相关的布局开发~
适用场景:弹性布局常用于移动端开发,但目前也有很多的开发者在PC上使用弹性布局~
下面是一个横向均匀分配空间的基础弹性布局案例:
<区块 类名="布局学习">
<行内元素>1</行内元素>
<行内元素>2</行内元素>
<行内元素>3</行内元素>
<行内元素>4</行内元素>
</区块>
<样式>
.布局学习{
宽度: 80%;
背景-颜色: 颜色值-金色;
高度: 150px;
显示模式: 弹性布局;
内容对齐: 周围间隔;
}
.布局学习 > 行内元素{
宽度: 100px;
高度: 100%;
背景-颜色: 颜色值-橙色;
外边距: 0px 5px;
弹性布局: 1;
}
</样式>
测试账号