css3弹性盒及其属性和视口的介绍

来源：互联网发布：淘宝大学的vip课靠谱吗编辑：程序博客网时间：2024/06/06 07:16

HTML代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <!--设置视口-移动端必须写-->    <!--宽度设置为设备宽度，缩放比例设为1，用户不可手动改变页面大小-->    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">    <link rel="stylesheet" href="style.css">    <title>Title</title>    <link rel="stylesheet" href="style.css"></head><body><div class="container">    <div class="item item1">001</div>    <div class="item">002</div>    <div class="item">003</div>    <div class="item">004</div>    <div class="item">005</div>    <div class="item">006</div>    <div class="item">007</div>    <div class="item">008</div></div></body></html>

css代码：

*{    margin: 0;    padding: 0;}html{    font-size: 16px;}.container{    /*设置成弹性布局*/    display: flex;    /*弹性布局的四种方式，行、列、反转行、反转列*/    /*flex-direction:row-reverse ;*/    /*弹性布局的溢出处理 会自适应宽高*/    /*flex-wrap: wrap-reverse;*/    width: 80%;    height: 800px;    border: 1px solid red;    box-sizing: border-box;    margin: 0 auto;    /*弹性盒的复合属性*/    flex-flow: row wrap;    /*设置子元素的水平对齐方式*/    justify-content: space-around;    /*!*设置子元素的垂直对齐方式*!*/    /*align-items: center;*/    /*设置子元素垂直的对齐方式*/    align-content: space-around;}.item{    /*width: 15rem;*/    height: 13rem;    background-color: #b368ff;    border:5px solid #9dff1f;    box-sizing: border-box;    text-align: center;    line-height: 13rem;    font-size: 3rem;}.item:first-child{    /*单个元素的垂直排列方式*/    /*align-self: center;*/    /*排序：按从小到大排序 order值笑的元素在前面*/    order: 5;    /*元素所占比例 占一份*/    flex: 1;}.item:nth-child(2){    order: 55;    /*占五份*/    flex: 5;}.item:nth-child(3){    order: 25;}.item:nth-child(4){    order: 33;}.item:nth-child(5){    order: 357;}.item:nth-child(6){    order: 5578;}.item:nth-child(7){    order: 13;}.item:nth-child(8){    order: 0;}

阅读全文

0 0