之前一篇栅格系统是用float布局来实现的 https://www.cnblogs.com/chenyingying0/p/12495051.html
其实并不太适合移动端,不过优点是兼容性比较好
这篇用flex来进行布局,不管在PC端还是移动端都很适合
不过存在兼容性问题,在低版本浏览器不适用。但纯粹移动端的话,效果很不错
index.html
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1"title>grid</link rel="stylesheet" href="font/iconfont.css"="base.css"="grid-flex.css"="index.css"bodyheader class="header-container"> div ="container"> ="row"> ="header-logo-container col-8 col-md-3"> a href="#" class="header-logo"><img src="img/logo.svg"></adiv="header-btn-container col-4 d-md-none"<!-- button一定要加type,否则不同浏览器给的值不同 --> button type="button"="btn-toggle" id="btn-toggle"> span ="btn-toggle-bar"spanbutton="header-nav-container col-md-9 d-none d-md-block"ul ="header-nav"li ="header-nav-item"="header-nav-link">手机&平板li>电视&影音>生活家电>电脑/办公/储存>网上商城ulheader> nav ="nav-container d-md-none"="nav"="nav-link"nav="slider-container"="slider-text-container col-md-5 col-md-order-last"h3 ="slider-title">Galaxy S9 | S9+h3h4 ="slider-subtitle">冰蓝 焕新上市h4="slider-btns"="btn-rounded">了解更多>立即购买="col-md-7 col-md-order-first"="img/1.png"script> var nav=document.getElementById("nav); navExtendedClassNamenav-container-extended; document.getElementById(btn-toggle).onclickfunction(){ if(nav.classList.contains(navExtendedClassName)){ nav.classList.remove(navExtendedClassName); }else{ nav.classList.add(navExtendedClassName); } } html>
base.css
*{margin:0;padding:box-sizing:border-box;} body{font-size:14px;} ul{list-style: none;} img{width:100%;border:none;/*IE浏览器会加边框*/vertical-align: top;解决图片与边框之间的间距*/} a{text-decoration: none;14px;color:#363636;} a:hover{#1428a0;}
grid-flex.css
解决嵌套时的padding:0 15px*/ .row{0 -15px;display:flex;flex-wrap:wrap;} xs .container{0 auto;水平居中0 15px;解决不嵌套时的margin:0 -15px;*/} sm @media (min-width:576px){ .container{width:540px;} } md @media (min-width:768px){720px;}lg @media (min-width:992px){960px;}xl @media (min-width:1200px){1140px;} } .col{flex-basis:flex-grow:1;}平分空间的布局 .col-1{flex:0 0 8.3333%;} .col-2{0 0 16.6667%;} .col-3{0 0 25%;} .col-4{0 0 33.3333%;} .col-5{0 0 41.6667%;} .col-6{0 0 50%;} .col-7{0 0 58.3333%;} .col-8{0 0 66.6667%;} .col-9{0 0 75%;} .col-10{0 0 83.3333%;} .col-11{0 0 91.6667%;} .col-12{0 0 100%;} .col-offset-0{margin-left:0;} .col-offset-1{8.3333%;} .col-offset-2{16.6667%;} .col-offset-3{25%;} .col-offset-4{33.3333%;} .col-offset-5{41.6667%;} .col-offset-6{50%;} .col-offset-7{58.3333%;} .col-offset-8{66.6667%;} .col-offset-9{75%;} .col-offset-10{83.3333%;} .col-offset-11{91.6667%;} .col-offset-12{100%;} .col-order-first{order:-1;} .col-order-0{ .col-order-1{1;} .col-order-2{2;} .col-order-3{3;} .col-order-4{4;} .col-order-5{5;} .col-order-6{6;} .col-order-7{7;} .col-order-8{8;} .col-order-9{9;} .col-order-10{10;} .col-order-11{11;} .col-order-12{12;} .col-order-last{13;} .col-sm{flex-basis: .col-sm-1{ .col-sm-2{ .col-sm-3{ .col-sm-4{ .col-sm-5{ .col-sm-6{ .col-sm-7{ .col-sm-8{ .col-sm-9{ .col-sm-10{ .col-sm-11{ .col-sm-12{ .col-sm-offset-0{ .col-sm-offset-1{ .col-sm-offset-2{ .col-sm-offset-3{ .col-sm-offset-4{ .col-sm-offset-5{ .col-sm-offset-6{ .col-sm-offset-7{ .col-sm-offset-8{ .col-sm-offset-9{ .col-sm-offset-10{ .col-sm-offset-11{ .col-sm-offset-12{ .col-sm-order-first{ .col-sm-order-0{ .col-sm-order-1{ .col-sm-order-2{ .col-sm-order-3{ .col-sm-order-4{ .col-sm-order-5{ .col-sm-order-6{ .col-sm-order-7{ .col-sm-order-8{ .col-sm-order-9{ .col-sm-order-10{ .col-sm-order-11{ .col-sm-order-12{ .col-sm-order-last{13;} .col-md{flex-basis: .col-md-1{ .col-md-2{ .col-md-3{ .col-md-4{ .col-md-5{ .col-md-6{ .col-md-7{ .col-md-8{ .col-md-9{ .col-md-10{ .col-md-11{ .col-md-12{ .col-md-offset-0{ .col-md-offset-1{ .col-md-offset-2{ .col-md-offset-3{ .col-md-offset-4{ .col-md-offset-5{ .col-md-offset-6{ .col-md-offset-7{ .col-md-offset-8{ .col-md-offset-9{ .col-md-offset-10{ .col-md-offset-11{ .col-md-offset-12{ .col-md-order-first{ .col-md-order-0{ .col-md-order-1{ .col-md-order-2{ .col-md-order-3{ .col-md-order-4{ .col-md-order-5{ .col-md-order-6{ .col-md-order-7{ .col-md-order-8{ .col-md-order-9{ .col-md-order-10{ .col-md-order-11{ .col-md-order-12{ .col-md-order-last{ .col-lg{flex-basis: .col-lg-1{ .col-lg-2{ .col-lg-3{ .col-lg-4{ .col-lg-5{ .col-lg-6{ .col-lg-7{ .col-lg-8{ .col-lg-9{ .col-lg-10{ .col-lg-11{ .col-lg-12{ .col-lg-offset-0{ .col-lg-offset-1{ .col-lg-offset-2{ .col-lg-offset-3{ .col-lg-offset-4{ .col-lg-offset-5{ .col-lg-offset-6{ .col-lg-offset-7{ .col-lg-offset-8{ .col-lg-offset-9{ .col-lg-offset-10{ .col-lg-offset-11{ .col-lg-offset-12{ .col-lg-order-first{ .col-lg-order-0{ .col-lg-order-1{ .col-lg-order-2{ .col-lg-order-3{ .col-lg-order-4{ .col-lg-order-5{ .col-lg-order-6{ .col-lg-order-7{ .col-lg-order-8{ .col-lg-order-9{ .col-lg-order-10{ .col-lg-order-11{ .col-lg-order-12{ .col-lg-order-last{ .col-xl{flex-basis: .col-xl-1{ .col-xl-2{ .col-xl-3{ .col-xl-4{ .col-xl-5{ .col-xl-6{ .col-xl-7{ .col-xl-8{ .col-xl-9{ .col-xl-10{ .col-xl-11{ .col-xl-12{ .col-xl-offset-0{ .col-xl-offset-1{ .col-xl-offset-2{ .col-xl-offset-3{ .col-xl-offset-4{ .col-xl-offset-5{ .col-xl-offset-6{ .col-xl-offset-7{ .col-xl-offset-8{ .col-xl-offset-9{ .col-xl-offset-10{ .col-xl-offset-11{ .col-xl-offset-12{ .col-xl-order-first{ .col-xl-order-0{ .col-xl-order-1{ .col-xl-order-2{ .col-xl-order-3{ .col-xl-order-4{ .col-xl-order-5{ .col-xl-order-6{ .col-xl-order-7{ .col-xl-order-8{ .col-xl-order-9{ .col-xl-order-10{ .col-xl-order-11{ .col-xl-order-12{ .col-xl-order-last{ } .d-none{ none !important;} .d-block{ block !important;} .d-sm-none{display: .d-sm-block{ block !important;} .d-md-none{display: .d-md-block{ .d-lg-none{display: .d-lg-block{ .d-xl-none{display: .d-xl-block{统一设置内边距 .col,.col-sm,.col-md,.col-lg,.col-xl,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12,.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12{ padding:0 15px; width:100%; }
index.css
布局*/ .header-container{ background:#fff; border-bottom:1px solid #dadada; } .header-logo-container,.header-btn-container,.header-nav-container{ height:64px; } .header-btn-container{ display:-webkit-flex;-moz-flex;-ms-flex;-o-flex;flex; 有浏览器兼容前缀,已省略。上线使用记得补全 justify-content:flex-end;水平右对齐 align-items:center;垂直居中*/ } .nav-container{ overflow:hidden;1px solid #dadada; transition:height .5s;需要补全兼容性写法 position: relative; top:-1px;解决不展开时多出的1px底边js中最好不要修改样式,而是通过控制类来改变 .nav-container-extended{201px;40*5+10; } slider .slider-container{ margin:20px 0; } .slider-container .row{#f5f5f5;0; } @media (min-width:768px){ .slider-container .row{ display: flex; align-items:center; } } .slider-text-container{ padding:20px; } 组件btn-toggle .btn-toggle{10px;transparent; border:none; border-radius:4px; cursor:pointer; } .btn-toggle:hover{#f9f9f9; } .btn-toggle-bar{ block; width:24px;#363636;2px; } 实现第一个条没有上间距 .btn-toggle-bar+.btn-toggle-bar{ margin-top:4px; } .btn-toggle:hover .btn-toggle-bar{#1428a0; } btn-rounded .btn-rounded{inline-block;10px 30px;1px solid #000; color:#000;30px; font-size:16px; font-weight:bold;all .3s; } .btn-rounded:hover{#000; } 内容 .header-logo{136px;center; } .header-nav,.header-nav-item,.header-nav-link{100%; } .header-nav{flex-end;14px; } .header-nav-item{ margin-left:24px; } .header-nav-item:first-child{ .header-nav-link{center;bold; } .nav-link{40px; line-height: .slider-title,.slider-subtitle,.slider-btns{ text-align: margin-bottom:20px; } .slider-title{30px; } .slider-subtitle{20px;bold; } .slider-container .btn-rounded{ margin-right:10px; } .slider-container .btn-rounded:last-child{0; }
效果图
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。