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>