flexbox弹性布局

来源：互联网发布：大数据魔镜破解版编辑：程序博客网时间：2024/05/17 17:59
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><style type="text/css">    /*兼容写法*/    /*display:-webkit-box;   display: -moz-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;*/    *{        margin: 0;        padding: 0;    }</style><body><style type="text/css">    /*单项目*/    .box{        width: 100%;        height: 80px;        border: 1px solid #000;        display: flex;/*必须属性*/        justify-content: space-between;/*设置项目的对齐方式，就能实水平方式对齐。*/        align-items: center;/*设置交叉轴对齐方式，可以垂直对齐。*/    }    .item{        width: 50px;        height: 50px;        border-radius: 50px;        background-color: red;    }    /*双项目*/    .box1{        width: 100%;        height: 120px;        border: 1px solid #000;        display: flex;/*必须属性*/        justify-content: center;/*设置项目的对齐方式，就能实水平方式对齐。*/        align-items: center;/*设置交叉轴对齐方式，可以垂直对齐。*/        flex-direction: column;    }    .item1{        width: 50px;        height: 50px;        border-radius: 50px;        background-color: red;    }    .item1:nth-child(2) {        align-self: flex-end;/*某个弹性对象的对齐方式*/    }    .box2 {        width: 100%;        height: 120px;        border: 1px solid #000;        display: flex;        flex-wrap: wrap;        align-content: space-between;        /*flex-wrap: wrap;*/ /*超出是否换行*/    }    .column2 {        flex-basis: 100%;/*初始化宽度*/        display: flex;        justify-content: space-between;    }    .item2{        width: 50px;        height: 50px;        border-radius: 50px;        background-color: red;    }</style><!-- --------------------骰子的布局----------------- --><!-- 单项目 --><div class="box">    <span class="item"></span></div><!-- 双项目 --><div class="box1">    <span class="item1"></span>    <span class="item1"></span></div><!-- 四项目 --><div class="box2">    <div class="column2">        <span class="item2"></span>        <span class="item2"></span>    </div>    <div class="column2">        <span class="item2"></span>        <span class="item2"></span>    </div></div><!-- ----------------------网格布局------------------- --><style type="text/css">    body{        /*overflow: hidden;*/    }    .Grid{        display: flex;        justify-content:center;    }    .Grid-cell{        border: 1px solid red;        height: 80px;        flex: 1;        display: flex;        justify-content: center;        align-items: center;        /*flex 属性是 flex-grow:元素的宽度为其他元素的多少倍宽、flex-shrink：元素收缩到其他元素的多少分之几 和 flex-basis：初始化宽度， 属性的简写属性,让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容*/    }    .Grid-cell.u-full {        flex: 0 0 100%;    }    .Grid-cell.u-1of2 {        flex: 0 0 50%;    }    .Grid-cell.u-1of3 {        flex: 0 0 33.3333%;    }    .Grid-cell.u-1of4 {        flex: 0 0 25%;    }    .item{        width: 50px;        height: 50px;        border-radius: 50px;        background-color: red;    }</style><div class="Grid">    <div class="Grid-cell u-1of4">        <span class="item"></span>    </div>    <div class="Grid-cell">...</div>    <div class="Grid-cell">...</div></div></body></html>
0 0