天天看点
返回

弹性布局常用属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>弹性布局</title>
        <style type="text/css">
            .div1{
                width: px;
                height: px;
                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: px;
                height: px;
                background-color: blue;
            }
            .div1 .div3{
                /*设置某个子元素的垂直排列方式*/
                align-self: center;

                /*当父容器宽度不够的时候，子容器是否压缩  0-不压缩 */
                flex-shrink: ;

                /*当父容器宽度过大的时候,子元素是否拉伸 0-不拉伸(默认)*/
                flex-grow: ;

                /*子元素在水平方向的排列顺序,默认都是0*/
                order: ;
            }
        </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>
html/css 弹性布局
上一篇: html/css弹性布局的几大常用属性详解
下一篇: 前端css弹性布局各种属性

继续阅读