简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex 容器和项目 常用属性

flex 容器和项目 常用属性

Giesen?
Giesen?原创
2021年07月26日 20:47:49471浏览
  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.     <style>
  10.         .rq{
  11.             /* .rq转为flex容器 */
  12.             background-color: aqua;
  13.             display: flex;  
  14.             height: 500px;
  15.             width: 500px;
  16.             flex-flow: row wrap;
  17.            /* --------------------------------- */
  18.            /* 主轴方向 */
  19.            /* flex-direction:row; 正向排列 默认 */
  21.            /* flex-direction:row-reverse; 反向排列 */
  23.             /* flex-direction:column; 主轴改为垂直方向 */
  25.             /* flex-flow: row wrap;   row/row-reverse 正向或者反向   wrap允许换行转为多行容器/nowrap */
  26.           /* ------------------------------- */
  27.              /* 项目主轴对齐方式 */
  29.             /* 项目 主轴居中 */
  30.             justify-content: center;
  31.             /* 项目  主轴靠尾部 */
  32.             /* justify-content: flex-end; */
  33.             /* 项目  主轴靠起始点 */
  34.             /* justify-content: flex-start; */
  36.            /* --------------------------- */
  38.            /* 分配项目的剩余空间 */
  39.            /* justify-content: space-around; 分散对齐 */
  40.            /* justify-content: space-between;  两端对齐 */
  41.               /* justify-content: space-evenly;   平行对齐 */
  43.            /* ------------------------------------- */
  44.             /* 交叉轴对齐方式 */
  45.             /* align-items:stretch; 拉伸对齐 */
  47.             /* align-items:flex-start; 上端对齐 */
  49.             /* align-items:flex-end; 下端对齐 */
  51.              /* align-items:center; 居中对齐 */
  53.         }
  54.          /* flex项目属性 */
  55.         .rq div {
  56.             /* 项目 宽度设置 */
  57.             flex-basis: 50px;
  58.   /* flex： 放大因子  收缩因子  宽度自动  0为禁止 1为允许  auto自动 或者 固定值 */
  59.             flex:1 1 auto;
  60.         }
  62.         .rq .a{
  63.             /* 单独设置某个项目交叉轴的属性 */
  64.             align-self:center;
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="rq">
  70.     <div class="a">
  71.         <p>亲爱的祖国</p>
  72.     </div>
  73.     <div>
  74.         <p>亲爱的祖国</p>
  75.     </div>
  76.     <div>
  77.         <p>亲爱的祖国</p>
  78.     </div>
  79.     <div>
  80.         <p>亲爱的祖国</p>
  81.     </div>
  82.     <div>
  83.         <p>亲爱的祖国</p>
  84.     </div>
  85.     <div>
  86.         <p>亲爱的祖国</p>
  87.     </div>
  88.     <div>
  89.         <p>亲爱的祖国</p>
  90.     </div>
  91.     <div>
  92.         <p>亲爱的祖国</p>
  93.     </div>
  94.     <div>
  95.         <p>亲爱的祖国</p>
  96.     </div>
  97.     <div>
  98.         <p>亲爱的祖国</p>
  99.     </div>
  100.     <div>
  101.         <p>亲爱的祖国</p>
  102.     </div>
  103. </div>
  104. </body>
  105. </html>
上一条：MVC-安装jQuery的npm和yarn的方法下一条：第二十课 Ajax & POST方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多