弹性布局常用属性

你的名字 2021-05-03 16:01 587阅读 0赞

<!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>