Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex容器与项目的常用属性
Blogger Information
Blog 37
fans 0
comment 0
visits 34715
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容器与项目的常用属性
手机用户1607314868
Original
651 people have browsed it

flex弹性盒元素

  1. 任何元素都可以通过”display:flex” 属性，转为弹性盒元素
  2. 转为flex元素后，他的内部的子元素就支持flex布局了
  3. 使用”display:flex” 属性的元素称为flex容器
  4. flex容器中的子元素称为flex项目
  5. 容器中的项目自动转为行内块元素(不管之前是什么类型)

    容器内子元素的排列方向

    属性’flex-flow’控制轴方向与换行
    1. <style>
    2.  *{box-sizing:border-box;}
    3.  .container{
    4.      display:flex;
    5.      height:15em;
    6.      border:1px solid #000;
    7.      padding:1em;
    8.      margin:1em;
    9.  }
    10.  .container>.item{
    11.      background-color:lightcyan;
    12.      width:5em;
    13.      height:5em;
    14.      border:1px solid #000;
    15.  }
    16.  .container{
    17.      <!--内部子元素排列方向，水平也就是主轴方向-->
    18.      /*flex-direction:row;*/
    19.      <!--是否换行-->
    20.      /*flex-wrap:nowrap;*/
    21.      <!--以上可以简写为 flex-flow-->
    22.      flex-flow:row nowrap;
    23.      /*水平方向row 垂直方向是column 换行wrap 不换行 nowrap*/
    24.  }
    25. </style>
    26. <body>
    27.  <div class="container">
    28.      <div class="item">item1</div>
    29.      <div class="item">item2</div>
    30.      <div class="item">item3</div>
    31.      <div class="item">item4</div>
    32.  </div>
    33. </body>

    项目的对齐方式

  • justify-content:项目在主轴方向上的对齐方式
  • align-item:项目在交叉轴上的对齐方式
  • align-content:项目在多行容器上的对齐方式
    主轴方向上的水平对齐方式
    设置项目在单行容器主轴水平上的对齐前提：主轴上存在剩余空间。剩余空间分配的两种方案 
  1. .container{
  2.         /* 1.将所有项目视为一个整体，在项目组两边进行分配 */
  3.         <!--右对齐-->
  4.           justify-content: flex-start;
  5.           <!--左对齐-->
  6.           justify-content: flex-end;
  7.           <!--居中对齐-->
  8.           justify-content: center;
  9.           /* 2.将项目视为一个个独立的个体，在项目之间进行分配 */
  10.           /* 两端对齐 第一个和最后一个不需要分配靠边对齐，中间的平均分配 */
  11.           justify-content: space-between;
  12.           /* 分散对齐 每个项目两边平均分配，相当于每个项目都有左右相等的margin值*/
  13.           justify-content: space-around;
  14.           /* 平均对齐 每个项目之间平均分配*/
  15.           justify-content: space-evenly;
  16.       }

交叉轴上的垂直对齐

  1.      .container{
  2.          /*默认，拉伸子元素*/
  3.          align-items: stretch;
  4.          /* 上对齐 */
  5.          align-items: flex-start;
  6.          /* 下对齐 */
  7.          align-items: flex-end;
  8.          /* 居中对齐 */
  9.          align-items: center;
  10.      }

多行容器上的对齐方式

多行容器可以设置主轴水平方向和交叉轴垂直方向上的对齐

  1.     .container{
  2.         /*多行容器*/
  3.         flex-flow: rwo wrap;
  4.         /* 项目组视为一个整体*/
  5.         align-content: stretch;
  6.         align-content: flex-end;
  7.         align-content: flex-start;
  8.         align-content: center;
  9.          /*将项目组一行视为一个整体*/
  10.         align-content: space-around;
  11.         align-content: space-between;
  12.         align-content: space-evenly;
  13.     }

项目上的属性

flex属性

flex: flex:flex-grow flex-shrink flex-basis
flex:放大因子 收缩因子 项目在主轴上的基准宽度 默认值就是设置的item宽度width:5em
默认上不放大可收缩 1是ture 0是false。
flex:0 1 auto;flex:initial;这俩的效果是一样的
flex:1 1 auto; flex:auto;可放大可收缩
如果只有一个数字，代表放大因子: flex:2;
注意：flex通常不会用来设置所有项目的默认选项，通常用来设置某一个项目。

  1. <style>
  2. .container .item:nth-of-type(2){
  3.     flex:1 0 auto;
  4. }
  5. </style>
某个项目对齐方式

设置某个项目的对齐方式
align-self属性

  1.    .container>.item:nth-of-type(2){
  2.        align-self: stretch;
  3.         /*上对齐*/
  4.        align-self: flex-start;
  5.        /*下对齐*/
  6.        align-self: flex-end;
  7.        /* 居中*/
  8.        align-self: center;
  9.    }

项目之间的排列顺序

默认是按照源码顺序排列的，谁写在前面谁就在前面。
order属性
order的值是数字，可以修改order的值来改变顺序位置，数字越小越靠前，越大越靠后。可以为负数。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>项目顺序</title>
  7.     <style>
  8.       *{
  9.           box-sizing: border-box;
  10.       }
  11.       .container{
  12.           display: flex;
  13.       }
  14.       .container>.item{
  15.           background-color:lightcyan;
  16.           border: 1px solid #000;
  17.           width: 5em;
  18.       }
  19.       .container>.item:nth-of-type(1){
  20.           order: 1;
  21.           order: 5;
  22.           background-color: lightgreen;
  23.       }
  24.       .container>.item:nth-of-type(2){
  25.           order:2;
  26.           background-color: lightgray;
  27.       }
  28.       .container>.item:nth-of-type(3){
  29.           order:3;
  30.           order:0;
  31.       }
  32.       .container>.item:nth-of-type(4){
  33.           order: 4;
  34.           order: -1;
  35.           background-color: yellow;
  36.       }
  38.     </style>
  39. </head>
  40. <body>
  41.     <div class="container">
  42.         <div class="item">item1</div>
  43.         <div class="item">item2</div>
  44.         <div class="item">item3</div>
  45.         <div class="item">itme4</div>
  46. </body>
  47. </html>
Correcting teacher：天蓬老师天蓬老师

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