当前博客:关于弹性布局的介绍

212 次浏览【转载需注明来源】

博客作者:【快码FOF编程】

个性签名:寒窗苦读十年一朝凤舞九天

弹性布局和块布局类似。但是它缺少一些可用于块布局的属性,比如使用与弹性布局的元素将不再支持浮动、清除浮动等;虽然弹性布局不支持了一些属性,但作为回报,它获得了支持复杂Web页面经常需要的,用于分配空间和调整内容的强大能力;例如说:弹性布局支持垂直居中、水平居中、横向布局、纵向布局、均匀分配空间等~

特性: 可以被摆放在上下左右任何方向,可以弹性调整大小来适配可用空间。 

原理:弹性布局等优势就在于其弹性调整大小上,我们可以使用弹性布局优雅的进行空间大小的分配;使用弹性布局首先必须要给父盒子设置显示模式:弹性布局;然后才可以进行相关的布局开发~

适用场景:弹性布局常用于移动端开发,但目前也有很多的开发者在PC上使用弹性布局~

下面是一个横向均匀分配空间的基础弹性布局案例:

<区块 类名="布局学习">
        <行内元素>1</行内元素>
        <行内元素>2</行内元素>
        <行内元素>3</行内元素>
        <行内元素>4</行内元素>
    </区块>
    <样式>
        .布局学习{
            宽度: 80%;
            背景-颜色: 颜色值-金色;
            高度: 150px;
            显示模式: 弹性布局;
            内容对齐: 周围间隔;
        }
        .布局学习 > 行内元素{
            宽度: 100px;
            高度: 100%;
            背景-颜色: 颜色值-橙色;
            外边距: 0px 5px;
            弹性布局: 1;
        }
    </样式>

关于弹性布局的介绍