栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

flex布局DEMO,3分钟吃透弹性盒子。。欢迎提出宝贵意见。

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

flex布局DEMO,3分钟吃透弹性盒子。。欢迎提出宝贵意见。




    
    
    
    document
    
 #box {
     width: 400px;
     height: 100px;
     background: #ff5555;
     position: relative;
     display: flex;
     margin-left: 200px;
     box-shadow: 0px 0px 5px;
     padding: 2px;
 }
 #btn {
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(100%, 0);
 }
 #btn1 {
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(100%, 100%);
 }
 #btn2 {
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(100%, 200%);
 }
 #btn3 {
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(100%, 300%);
 }
 #btn4 {
     position: absolute;
     right: 0;
     top: 0;
     transform: translate(100%, 400%);
 }
 .item {
     width: 50px;
     text-align: center;
     color: #fff;
     text-decoration: underline;
 }
 .item:nth-child(1) {
     background: #eacf7d;
     font-size: 20px;
 }
 .item:nth-child(2) {
     background: yellowgreen;
     font-size: 25px;
 }
 .item:nth-child(3) {
     background: deepskyblue;
 }
 .four {
     background: coral;
     color:#fff;
     font-size: 15px;
     text-align: center;
     width:50px;
     text-decoration: underline;
 }
 #range {
     position: absolute;
     left: 0;
     bottom: 0;
     transform: translate(0, 100%);
     cursor: pointer;
 }
    



    1
    2
    3
    4
    
    
    

    
    
    




转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242869.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号