search

博客列表 >flex项目属性及PC端、移动端布局方案

flex项目属性及PC端、移动端布局方案

北纬38
北纬38原创
2020年07月03日 19:14:47760浏览

1.弹性子元素属性及含义

元素属性 属性说明
Order <integer> 控制弹性容器里子元素的顺序,数值小的排在前面，可以为负值
flex-grow <number> 设置弹性子元素的扩展比率，不允许为负值，默认值为0，根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间。
flex-shrink <number> 设置弹性子元素的收缩比率，不允许为负值，默认值为1，根据弹性盒子元素所设置的扩展因子作为比率来收缩空间。
flex-basis 指定弹性子元素伸缩前的默认大小值，相当于width和height属性。
Flex flex- grow, flex- shrink和flex- basis属性的复合属性，设置弹性子元素如何分配空间。
align-self 允许独立的弹性子元素覆盖弹性容器的默认对齐设置(align-items)侧轴对齐方式。 
  1.      .container {
  2.         width: 500px;
  3.         display: flex;
  4.       }
  5.       .container > .item {
  6.         width: 80px;
  7.         flex-grow: 0;
  8.         flex: 1;
  9.         flex: auto;}
  10.       .container > .item:first-of-type {
  11.         flex-grow: 2;
  12.         flex-grow: 0.5;}
  13.    </style>

  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         display: flex;}
  5.       .container > .item {
  6.         width: 160px;
  7.         flex-shrink: 0;
  8.         flex-shrink: 1;}
  9.       .container > .item:first-of-type {
  10.         flex-shrink: 0.5;}
  11.     </style>

  1.     <style>
  2.       .container {
  3.         width: 300px;
  4.         display: flex;}
  5.       .container > .item {
  6.         width: 60px;
  7.         flex: 0 1 auto;
  8.         flex: 1 1 auto;
  9.         flex: 1;
  10.         flex: auto;
  11.         flex: 0 0 auto;
  12.         flex: none;
  13.         /* flex: 0; */
  14.         flex: 0 0 0%;}

2.PC端布局的通用解决方案

  1.     <style>
  2.       /* 初始化 */
  3.       * {
  4.         margin: 0;
  5.         padding: 0;
  6.         box-sizing: border-box;}
  7.       a {color:black;
  8.         text-decoration: none;}
  9.       /* 将body转为flex */
  10.       body {min-width: 660px;
  11.         display: flex;
  12.         /* 主轴垂直方向,不换行 */
  13.         flex-flow: column nowrap;}
  14.       header,footer {
  15.         height: 60px;
  16.         border: 1px solid #000;
  17.         background-color: cornsilk;}
  18.       /* 将页眉转为flex */
  19.       header {
  20.         display: flex;
  21.         /* 所有项目在交叉轴方向上居中显示 */
  22.         align-items: center;}
  23.       header > a {
  24.         flex: 0 1 100px;
  25.         text-align: center;}
  26.       /* Logo */
  27.       header > a:first-of-type {
  28.         margin-right: 50px;}
  29.       header > a:last-of-type {
  30.         margin-left: auto;}
  31.       /* 鼠标悬停时忽略logo */
  32.       header > a:hover:not(:first-of-type) {
  33.         color: coral;}
  34.       .container {
  35.         min-height: 400px;
  36.         margin: 10px auto;
  37.         display: flex;
  38.         justify-content: center;}
  39.       .container > aside,
  40.       .container > main {
  41.         border: 1px solid #000;
  42.         padding: 10px;}
  43.       .container > aside {
  44.         flex: 0 0 200px;
  45.         background-color: darkseagreen;}
  46.       .container > main {
  47.         flex: 0 0 600px;
  48.         margin: 0 10px;
  49.         background-color: dimgray;}
  50.       footer {
  51.         display: flex;
  52.         flex-flow: column nowrap;
  53.         text-align: center;}
  54.     </style>
  55.   </head>
  56.   <body>
  57.     <!-- 页眉 -->
  58.     <header>
  59.       <a href=""><img src="252.jpg"></a>
  60.       <a href="">首页</a>
  61.       <a href="">宣传栏</a>
  62.       <a href="">信息公开</a>
  63.       <a href="">法律法规</a>
  64.       <a href="">登录</a>
  65.     </header>
  66.     <!-- 主体 -->
  67.     <div class="container">
  68.       <!-- 左边栏 -->
  69.       <aside>左边栏</aside>
  70.       <!-- 主体内容区 -->
  71.       <main>主体内容区</main>
  72.       <!-- 右边栏 -->
  73.       <aside>右边栏</aside>
  74.     </div>
  75.     <!-- 页脚 -->
  76.     <footer>
  77.       <p>
  78.         小白社区网 ©版权所有   (2020-2022) | 备案号:
  79.         <a href="">鄂ICP-17********</a>
  80.       </p>
  81.       <p>中国.湖北省XXX是100号| 电话：027-6681888**</p>
  82.     </footer>
  83.   </body>

3.移动端常用布局方案

  1.     <style>
  2.         *{
  3.             margin: 0;
  4.             padding: 0;
  5.             box-sizing: border-box;
  6.         }
  7.         a{
  8.             text-decoration: none;
  9.             color: dimgrey;
  10.         }
  11.         html{
  12.             height: 100px;
  13.             width: 100px;
  14.             font-size: 14px;
  15.             color: darkgrey;
  16.         }
  17.         body{
  18.             min-width: 360px;
  19.             background-color: white;
  20.             display: flex;
  21.             flex-flow: column nowrap;
  22.         }
  23.         body > header{
  24.             color: darkorange;
  25.             background-color: sienna;
  26.             height: 40px;
  27.             display: flex;
  28.             align-items: center;
  29.             justify-content: space-between;
  30.             position: fixed;
  31.             width: 100vw;
  32.         }
  33.         body > .slider{
  34.             height: 225px;
  35.         }
  36.         body > .slider > img{
  37.             height: 80%;
  38.             width: 100%;
  39.             }
  40.             /* 主导航区 */
  41.             nav{
  42.                 height: 90px;
  43.                 margin-bottom: 30px;
  44.                 display: flex;
  45.                 flex-flow: row wrap;
  46.                 align-content: space-around;
  47.             }
  48.                 nav div{
  49.                     width: 25vw;
  50.                     display: flex;
  51.                     flex-flow: column nowrap;
  52.                 }
  53.                 nav > div > a:first-of-type{
  54.                     text-align: center; 
  55.                 }
  56.                 nav > div > a:last-of-type{text-align: center;}
  57.                 nav > div img{
  58.                     width: 50%;
  59.                 }
  60.     /* 每个区域的标题样式 */
  61.       .title {
  62.         margin-top: 10px;
  63.         font-size: 1.2rem;
  64.         font-weight: normal;
  65.         text-align: center;
  66.       }
  67.     /* 包邮商品区 */
  68.         .free-goods {
  69.         border-top: 1px solid #cdcdcd;
  70.         margin-top: 10px;
  71.         font-size: 1rem;
  72.         display: flex;
  73.          /* 水平多行容器 */
  74.         flex-flow: row wrap;
  75.       }
  76.       .free-goods img {
  77.         width: 80%;
  78.       }
  79.       .free-goods > .goods-img{
  80.           padding: 35px;
  81.           box-sizing: border-box;
  82.           flex: 1 2 30vw;
  83.           display: flex;
  84.           flex-flow: column nowrap;
  85.           justify-content: space-between;
  86.       }
  87.       .free-goods > .goods-img > div{
  88.           display: flex;
  89.           justify-content: space-between;
  90.       }
  91.       body > footer {
  92.         color: #666;
  93.         background-color: #efefef;
  94.         border-top: 1px solid #ccc;
  95.         height: 35px;
  97.         position: fixed;
  98.         bottom: 0;
  99.         width: 100vw;
  100.         display: flex;
  101.         justify-content: space-evenly;
  102.       }
  103.       body > footer span {
  104.         margin-top: 10px;
  105.         font-size: 1rem;
  106.         display: flex;
  107.         flex-flow: column nowrap;
  108.         align-items: center;
  109.         color: brown;
  110.       }
  111.       body > footer a > span:first-of-type {
  112.         font-size: 2rem;
  113.       }
  114.     </style>
  115. </head>
  116. <body>
  117.     <!-- 页眉 -->
  118.     <header>
  119.         <a href=""><img src="font.icon/252.jpg" alt=""></a>
  120.         <span class="iconfont icon icon-shouye" style="font-size: 45px;"></span>
  121.     </header>
  122.     <!-- 轮播图 -->
  123.     <div class="slider">
  124.         <img src="font.icon/10.jpg" alt="">
  125.     </div>
  126.     <!-- 主导航区 -->
  127.     <nav>
  128.         <div>
  129.             <a href=""><img src="font.icon/1.jpg" alt=""></a>
  130.             <a href="">淘宝</a>
  131.         </div>
  132.         <div>
  133.             <a href=""><img src="font.icon/2.jpg" alt=""></a>
  134.             <a href="">天猫</a>
  135.         </div>
  136.         <div>
  137.             <a href=""><img src="font.icon/3.jpg" alt=""></a>
  138.             <a href="">京东</a>
  139.         </div>
  140.         <div>
  141.             <a href=""><img src="font.icon/4.jpg" alt=""></a>
  142.             <a href="">拼多多</a>
  143.         </div>
  144.         <div>
  145.             <a href=""><img src="font.icon/5.jpg" alt=""></a>
  146.             <a href="">唯品会</a>
  147.         </div>
  148.         <div>
  149.             <a href=""><img src="font.icon/6.jpg" alt=""></a>
  150.             <a href="">苏宁</a>
  151.         </div>
  152.         <div>
  153.             <a href=""><img src="font.icon/7.jpg" alt=""></a>
  154.             <a href="">饿了么</a>
  155.         </div>
  156.         <div>
  157.             <a href=""><img src="font.icon/8.jpg" alt=""></a>
  158.             <a href="">美团</a>
  159.         </div>
  160.     </nav>
  161.     <!-- 免运费商品 -->
  162.     <h3>免运费商品<span class="iconfont icon icon-mian" style="color: darkorange;"></span></h3>
  163.     <div class="free-goods">
  164.         <div class="goods-img">
  165.             <a href=""><img src="font.icon/9.jpg" alt=""></a>
  166.             <p>优选
  167.                 【田昊验货推荐】亿嘉樱花雪24件套日式雪花釉碗盘套装（双色可选）
  168.                 </p>
  169.                 <div>
  170.                     <span>89 元</span>
  171.                     <span class="iconfont icon icon-gouwuche"></span>
  172.                 </div>
  173.                 <a href=""><img src="font.icon/11.jpg" alt=""></a>
  174.                 <p>迪奥烈艳蓝金口红唇膏999#滋润/哑光3.5g</p>
  175.                 <div>
  176.                     <span>169 元</span>
  177.                     <span class="iconfont icon icon-gouwuche"></span>
  178.                 </div>
  179.                 <a href=""><img src="font.icon/12.jpg" alt=""></a>
  180.                 <p>促销【领券立减】Huawei/华为nova7 SE 5G超级快充40W高清四摄智能手机5g手机</p>
  181.                 <div>
  182.                     <span>5999 元</span>
  183.                     <span class="iconfont icon icon-gouwuche"></span>
  184.                 </div>
  185.                 <a href=""><img src="font.icon/13.jpg" alt=""></a>
  186.                 <p>Redmi小爱音箱 Play</p>
  187.                 <div>
  188.                     <span>359 元</span>
  189.                     <span class="iconfont icon icon-gouwuche"></span>
  190.                 </div>
  191.         </div>
  192.     </div>
  193.     <!-- 页脚 -->
  194.     <footer>
  195.         <span class="iconfont icon con-wodehongbao"></span>
  196.         <span>我的红包</span>
  197.         <span class="iconfont icon icon-wodedingdan"></span>
  198.         <span>我的订单</span>
  199.         <span class="iconfont icon icon-gouwuche"></span>
  200.         <span>购物车</span>
  201.         <span class="iconfont icon icon-shouhuodizhi"></span>
  202.         <span>收货地址</span>
  203.     </footer>
  204. </body>

4.总结

  • 弹性盒子的各元素应用，是内容发生相应变化。
  • 对弹性盒子的掌握还是不够，有些步骤上还是不知道怎么修改。
上一条：workerman客服聊天系统下一条：pc端布局及移动端仿京东布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多