Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex项目属性及PC端、移动端布局方案
Blogger Information
Blog 13
fans 2
comment 0
visits 10344
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
flex项目属性及PC端、移动端布局方案
北纬38
Original
759 people have browsed it

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.总结

  • 弹性盒子的各元素应用，是内容发生相应变化。
  • 对弹性盒子的掌握还是不够，有些步骤上还是不知道怎么修改。
Correcting teacher：GuanhuiGuanhui

Correction status：qualified

Teacher's comments：还行！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post