Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex 容器和项目 常用属性
Blogger Information
Blog 12
fans 0
comment 0
visits 6609
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 容器和项目 常用属性
Giesen?
Original
472 people have browsed it
  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>
Correcting teacher：PHPzPHPz

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