flex弹性伸缩布局笔记

来源：互联网发布：统计学博士知乎编辑：程序博客网时间：2024/05/21 11:04

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><style>    .holyGrail{        display: flex;        min-height: 100vh;        flex-direction: column;        height:70px;    }    header,footer{        flex:1;    }    .HolyGrail-body{        display:flex;        flex:1;    }    .HolyGrail-content{        flex:1;        border:1px solid #000000;        background-color: #eee;    }    .HolyGrail-nav,.HolyGrail-ads{        flex: 0 0 12em;/*又flex-grow ,flex-shrink ,flex-basis flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。lex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。类似于设置了width属性。*/
        border:1px solid #000000;        background-color: #eee;    }    .HolyGrail-nav{        order:-1;    }</style><body class="holyGrail"><!--平均布局--><!--<div class="flex">  -->    <!--<p class="column">最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟上面的骰子</p>-->    <!--<p class="column">版本的Flexbox模型是2012年9月提出的工作草案，这个草案是由W3C 推出的最新语法。这个版本立志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现统</p>-->    <!--<p class="column">报道称，此前也发生过缅甸商人在中国境内银行开设的账户被冻结的情况，主要涉及网络赌博以及商品走私等，但此次事件影响更加广泛。据《缅甸之光》报道，部分缅甸商人在中国农业银行和建设银行开设的账户从15日起相继被冻结。木姐边境贸易口岸的贸易额占缅甸边境贸易总额的70%，缅甸商人希望缅甸政府尽快与中国政府协商解决此事。针对这一情况，缅甸掸邦议会议员、民盟负责人</p>-->    <!--<p class="column">　中国驻缅甸大使馆19日在发给《环球时报》记者的回应中说，据了解，为维护两国边民共同利益，打击边境地区非法活动，近期中方有关部门在调查涉嫌跨境案件过程中，依法要求两国从事边贸人员配合调查并临时冻结了一些人员账户，其中包括部分缅方边贸人员账户。中方上述临时措施，也是为了维护两国合法边贸人员的正当权益和中缅边贸</p>--><!--</div>--><!--圣杯布局-->    <header>我是头</header>        <div class="HolyGrail-body">            <main class="HolyGrail-content">内容...........</main>            <aside class="HolyGrail-nav">左导航</aside>            <nav class="HolyGrail-ads">右导航</nav>        </div>    <footer>脚</footer></body></html>

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><style>    body{        background-color: #000000;    }    .box{        display:flex;        /*justify-content:flex-end;  *//*flex-end右对齐，默认就是flex-start*/        /*align-items:flex-end;   *//*交叉轴对其方式*/        /*flex-direction:column;*/     /*纵轴或者横轴排列方式*/        /*justify-content:space-between;*/        /*align-content:space-between;*/        /*align-items:flex-end;*/        flex-wrap:wrap; /*容器装不下的时候自动换行*/        width:104px;        height:104px;        background-color: #e7e7e7;        margin:16px;        padding:4px;        object-fit: contain;        box-shadow:        inset 0 5px white,        inset 0 -5px #bbb,        inset 5px 0 #d7d7d7,        inset -5px 0 #d7d7d7;        border-radius:10%;    }    .item{        display:block;        width:24px;        height:24px;        border-radius: 50%;        background-color: #000000;        box-shadow: inset 0 3px #111, inset 0 -3px #555;        margin:4px;    }    .box span:nth-child(2){        order:1;        flex:1;        /*align-self:center;*/        /*align-self:center;*/    }    .box span:nth-child(3){        flex:1;   /*占用比例大小*/        order:2;  /*排列顺序*/        /*align-self:center;*/        /*align-self:flex-end;*/    }    .box span:nth-child(4){        order:3;        flex:1;        /*align-self:center;*/        /*align-self:flex-end;*/    }    .row{        display:flex;        width:100%;        /*justify-content:space-between;*/    }    .box div:nth-child(2){        justify-content:center;    }    .box div:nth-child(3){        justify-content:space-between;    }</style><body><div class="box">    <div class="row">        <span class="item"></span>        <span class="item"></span>        <span class="item"></span>    </div>    <div class="row">        <span class="item"></span>    </div>    <div class="row">        <span class="item"></span>        <span class="item"></span>    </div></div></body></html>

阅读全文

0 0