flex弹性伸缩布局笔记

最新推荐文章于 2023-01-19 20:42:48 发布

fly18702787810

最新推荐文章于 2023-01-19 20:42:48 发布

阅读量292

点赞数

本文链接：https://blog.csdn.net/fly18702787810/article/details/73498620

版权

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

fly18702787810

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex弹性伸缩布局笔记

html>html>head lang="en"> meta charset="UTF-8"> title>title>head>style> .holyGrail{ display: flex; min-height: 100vh; flex-direction: column; height:70p
复制链接

扫一扫