弹性布局常用属性

来源：互联网发布：互普威盾软件编辑：程序博客网时间：2024/06/05 00:51
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>弹性布局</title>        <style type="text/css">            .div1{                width: 800px;                height: 400px;                background-color: red;                /* 弹性布局                           * 弹性布局的区域内，将不再使用块级/行级元素的排列，而是统一使用弹性布局的设置                 * */                display: flex;                /*设置子元素排列的方向 row-水平 column-垂直*/                flex-direction: row;                /*设置子元素在水平方向上的排列方式                            * flex-start：居左（默认） flex-end：居右 center：居中                 * space-around：所有子元素平分间隔，并且两边空余一条间距                 * space-between：所有子元素平分间隔，两边不留空                 * */                justify-content: space-between;                /*设置水平方向行末是否断行*/                flex-wrap: wrap;                /*设置子元素在垂直方向上的排列方式                 * flex-start：居上（默认） flex-end：居下 center：居中                 * */                align-items:center ;                /*对于多行子元素                                 * 设置子元素在垂直方向上的排列方式                 * flex-start：居上（默认） flex-end：居下 center：居中                 * */                align-content: center;            }            .div1 div{                width: 100px;                height: 100px;                background-color: blue;            }            .div1 .div3{                /*设置某个子元素的垂直排列方式*/                align-self: center;                /*当父容器宽度不够的时候，子容器是否压缩  0-不压缩 */                flex-shrink: 0;                /*当父容器宽度过大的时候,子元素是否拉伸 0-不拉伸(默认)*/                flex-grow: 1;                /*子元素在水平方向的排列顺序,默认都是0*/                order: 6;            }        </style>    </head>    <body>        <div class="div1">            <div class="div2">1</div>            <div class="div3">2</div>            <div class="div4">3</div>            <div class="div5">4</div>            <div class="div6">5</div>        </div>    </body></html>
阅读全文
0 0