ASCII码 ASCII码

CSS:flex布局：项目上的属性

发布于：2022-05-23 17:17:14  栏目：技术文档

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>flex布局：项目上的属性</title>
  8. </head>
  9. <body>
  11.     <div class="container">
  12.         <div class="item">item1</div>
  13.         <div class="item">item2</div>
  14.         <div class="item">item3</div>
  15.     </div>
  17.     <style>
  19.         *{
  20.             margin: 0;
  21.             padding: 0;
  22.             box-sizing: border-box;
  23.         }
  24.         /* flex容器 */
  25.         .container{
  26.             display: flex;
  27.             height: 20em;
  28.             border: 1px solid #000;
  29.         }
  31.         .container > .item{
  32.             /* flex容器中的“子元素”则成了“弹性项目/flex项目” */
  33.             /* width:10em; */
  34.             padding: 1em;
  35.             /* height: 10em; */
  36.             width: 10em;
  37.             /* max-width: 10em; */
  38.             /* background-color: lightcyan; */
  39.             border: 1px solid #000;
  41.             /* flex: 放大，收缩因子，计算尺寸 */
  42.             /* flex:0 1 200px; */
  44.             /* 优先级
  45.             max-width > 计算宽度 > width
  46.             */
  48.             flex:0 1 auto;
  49.             flex:initial;
  50.             /* 初始化：不允许放大，只允许缩小 */
  52.             flex: 1 1 auto;
  53.             flex:auto;
  55.             /* 允许放大，也允许缩小，完全响应式布局 */
  57.             flex: 0 0 auto;
  58.             flex:none;
  60.             /* 禁止放大，也禁止缩小，完全不用响应式布局 */
  62.             /* 单值 */
  63.             /* flex:1; =flex 1 1 auto */
  65.             /* 双值 */
  66.             /* flex: 1 300px; */
  68.         }
  71.             /* 顺序 */
  72.             .container .item:first-of-type{
  73.                 background-color: yellowgreen;
  74.                 order: 1;
  76.             }
  78.             .container .item:last-of-type{
  79.                 background-color: cyan;
  80.                 order: -1;
  82.             }
  88.     </style>
  91. </body>
  92. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行