Home > List of blog posts > flex 容器常用的 6 个属性

Blogger Information

Blog 19

fans 0

comment 0

visits 8374

Special Recommendation

More>

Related recommendations

flex 容器常用的 6 个属性

flex 容器,就是一个块元素,只在一个方向上排列元素(默认水平排列)

主轴 : 元素排列
交叉轴 : 元素对齐
所有子元素自动转为行内级的块元素
沿主轴排列
剩余空间 : 未分配的空间,可以利用的空间
项目 : 容器中的子元素(只能是子元素)

属性

第一个属性 : flex-flow , 控制主轴方向与是否换行
第二个属性 : place-content , 剩余空间在项目中如何分配
第三个属性 : place-items , 项目在交叉轴对齐

将当前元素转为弹性盒子 `display:flex;`

.container {
  /* 转为弹性盒子 */
  display: flex;
  /* 支持宽高 */
}

主轴方向 `flex-direction:row(行方向)/column(列方向);`

.container {
  /* 主轴方向为行方向 */
  flex-direction: row;
  /* 主轴方向为列方向 */
  flex-direction: column;
}

项目在主轴上是否允许换行 `flex-wrap:wrap/nowrap;`

.container {
  /* 允许换行 */
  flex-wrap: wrap;
  /* 不换行,默认 压缩子元素空间*/
  flex-wrap: nowrap;
}

主轴方向和是否允许换行简写

.container {
  /* flex-flow:flex-direction flex-wrap; */
  flex-flow: row nowrap;
}

剩余空间如何分配 `place-content: ;`

.container {
  /* 一、将所有项目看成一个整体,将剩余空间在所有项目两边进行分配 */
  /* 1.默认值:将剩余空间放在所有项目右边,所有项目从左边开始排列 */
  place-content: start;
  /* 2.将剩余空间放在所有项目左边,所有项目从右边开始排列 */
  place-content: end;
  /* 3.将剩余空间在项目两边平均分配 */
  place-content: center;
  /* 二、将所有项目看成独立的个体,将剩余空间在所有项目之间进行分配 */
  /* 1.两端对齐 */
  place-content: space-between;
  /* 2.分散对齐 */
  place-content: space-around;
  /* 3.平均对齐 */
  place-content: space-evenly;
}

项目在交叉轴上的对齐 `place-items: ;`

.container {
  /* 1.默认值:自动伸展 */
  place-items: stretch;
  /* 2.上对齐 */
  place-items: start;
  /* 3.下对齐 */
  place-items: end;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body * {
        outline: 1px dashed red;
      }
      body .container {
        height: 20em;
        /* 改变为弹性盒子 */
        display: flex;
        border: 1px solid;
        /* 一、主轴方向 */
        /* 主轴方向为行方向 */
        /* flex-direction: row; */
        /* 主轴方向为列方向 */
        /* flex-direction: column; */
        /* 二、是否允许换行 */
        /* flex-wrap: wrap; */
        /* flex-wrap: nowrap; */
        /* 三、主轴方向和允许换行 */
        /* flex-flow: row nowrap; */
        /* 四、剩余空间的分配 */
        /* place-content: start; */
        /* place-content: end; */
        /* place-content: center; */
        /* place-content: space-between; */
        /* place-content: space-around; */
        /* place-content: space-evenly; */
        /* 五、交叉轴对齐 */
        /* place-items: stretch; */
        /* place-items: start; */
        /* place-items: end; */
      }
      body .container .item {
        width: 10em;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

项目常用属性

1.flex : 放大因子收缩因子计算宽度;

.container > .item{
     flex:0 1 auto; /* 默认值 */
     /* 替代语法 */
     flex:initial;
    /* 设置了项目宽度,所以auto直接引用width */
    /* 如果在flex中自定义width,则flex.width>.item.width */
    /* 如果设置了min-width,则它权重最大,min-width > flex.width > .item.width */
    /* 完全响应式 : 允许放大 允许缩小 宽度自动 */
    flex:1 1 auto;
    /* 替代语法 */
    flex:auto;
    /* pc布局 : 完全失去响应 禁止放大 禁止缩小  */
    flex:0 0 auto;
    /* 代替语法 */
    flex:none;
    flex:1; => flex:1 1 auto;
    /* 如果省略第二、第三个值,则全取默认值 */
}

2.order 可以改变项目在主轴上的排列顺序

.container > .tiem:first-of-type {
  order: 0; /*默认值*/
  /* 值越小越靠前,值越大排列越往后,支持负数 */
}

3.place-self 控制某一个项目在交叉轴的对齐

.container > .tiem:first-of-type {
  place-self: start;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>flex</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body * {
        outline: 1px dashed red;
      }
      body .container {
        height: 20em;
        border: 1px solid;
        display: flex;
      }
      body .container .item {
        width: 10em;
        /* flex: 1 1 auto; => flex: auto; */
        /* flex: 0 1 auto; => flex: initial; */
        /* flex: 0 0 auto; => flex: none; */
        /* flex: 1 0 auto; => flex: 1*/
      }
      body .container .item:first-of-type {
        /* order: -10; */
        /* place-self: start; */
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
</html>

Correcting teacher：

PHPz

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

markdown语法与emmet语法

2022-08-02 15:05:07

flex 容器常用的 6 个属性

flex 容器,就是一个块元素,只在一个方向上排列元素(默认水平排列)

属性

将当前元素转为弹性盒子 display:flex;

主轴方向 flex-direction:row(行方向)/column(列方向);

项目在主轴上是否允许换行 flex-wrap:wrap/nowrap;