您的位置：首页 > 其它

flex弹性伸缩布局笔记

2017-06-20 15:23 399 查看 
<!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>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航