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>

更多相关文章

  1. Flex术语 属性总结
  2. CSS学习_0705作业
  3. flex容器以及属性
  4. flex容器
  5. flex初体验之常用属性练习
  6. C语言进阶（六）--自定义类型详解(结构体+枚举+联合)
  7. C语言之结构体内存的对齐
  8. flex 容器的 flex-flow, justify-content, align-items, align-c
  9. grid对齐方式与基础实战

随机推荐

  1. 《Python知识手册》更新V2.0版，高清PDF免
  2. 小小里程碑，读者3w+，公众号运营经验揭秘
  3. 《Python知识手册》更新V2.0.1版，PDF中添
  4. 用 Python 动态曲线图来对全球疫情进行演
  5. 小伙子不讲武德，竟用Python爬取了B站上1.4
  6. 合并/拆分 Excel？Python、VBA轻松自动化
  7. Python动态图见得多了？Excel：亦可赛艇！我可
  8. 使用Eclipse实现自定义Jmeter函数助手
  9. Python自动化办公 | 同事要我帮忙补写178
  10. 数据分析师必知必会：AB测试项目复盘（附PPT