flex 详解

flex

flex的主要内容为 容器和项目 | 主轴和交叉轴

主轴 | 交叉轴（相对于flex-direction）

flex-direction: row 主轴-水平方向 | 交叉轴-垂直方向

flex-direction: row-reverse 主轴-水平方向从右向左

flex-direction: column 主轴-垂直方向 | 交叉轴-水平方向

flex-direction: column-reverse 主轴-垂直方向从下向上

---

容器

常用：
justify-content：center | space-around | space-between；
align-items： center；

• justify-content （相对于主轴）

space-around、space-between 、space-evenly 设置项目在容器内的分布
center、flex-start、flex-start 设置项目在容器内的位置

• align-items （相对于交叉轴）

center、flex-start、flex-end 项目在容器内的位置
baseline 所有的项目向第一个项目的基线进行对齐

baseline

stretch 项目尺寸沿交叉轴的拉伸

更多的属性

• flex-flow ： flex-direction | flex-wrap

  1. flex-direction 决定主轴的方向

  2. flex-wrap 是否换行

• align-content 多行

  flex-start | flex-end

  space-between | space-around

  stretch

.dad {
  width:400px;
  height: 70px;
  display:flex;
  background:#dedede;
  justify-content:space-between;
  align-items: center;
  /* flex-direction: column; */
}

.dad > div{
  background-color: #fedfed
}
.child2 {
  flex:1;
  margin:auto 10px;
  background-color: #fedfed
}
.child3 {
  width: 20px;
  height: 30px;

  background-color: #fedfed
}
.child {
  width: 20px;
  height: 40px;

  background-color: #fedfed
}  

每行固定个数，多行展示

 

---

 

项目

常用：

flex：1

• flex 是flex-grow、flex-shrink、flex-basis缩写

  1. flex-grow 项目在空间剩余时扩展宽度（默认值为0即不扩展）

     单个项目 : grow < 1 扩展大小为按grow值与剩余空间的比例计算

          grow > 1 扩展大小为全部剩余空间

     多个项目: grow总和 < 1 每个项目扩展大小为按grow值与剩余空间的比例计算

          grow总和 > 1 每个项目按比例占据全部剩余空间

  计算方式： 剩余空间 * grow/grow总

  2.flex-shrink 项目在空间不足时收缩（默认值为1即收缩）

     单个项目: shirink < 1 项目不完全收缩，将会溢出容器

         grow > 1 项目完全收缩

     多个项目: grow总和 < 1 项目不完全收缩，溢出容器

     ;    grow总和 > 1 项目不会溢出容器，项目尺寸为shrink比例

  计算方式： 宽度 x shrink/（shrink x 宽度）总和 x 需要收缩的宽度

  3. flex-basics 项目在空间中默认的大小 （不一定是项目最后的大小）

   优先级大于width

  4. flex ： [flex-grow | flex-shrink | flex-basis]

     - 默认值为 0 1 auto

     - none 为 0 0 auto

     - auto 为 1 1 auto

更多的属性

• order [默认值为0]

改变项目的排列顺序，order越小越靠前

• align-self 设置项目自己在交叉轴位置 --- align-content相同

.dad {
  width:450px;
  height: 700px;
  display:flex;
  background:#dedede;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  /* flex-direction: column; */
}

.dad > div{
  width: 100px;
  height: 100px;
  margin:0 10px 10px 0;
  background-color: #fedfed
}

2自适应

---

更多flex

1. 一般div中会出现垂直margin合并，但在flex布局中不会合并

2. 在flex中margin：auto为剩余空间的最大值

   单个div在flex中设置margin:auto即可垂直水平居中

多个div在flex中设置margin:0 auto即可实现justify-content：space-between效果

<u>项目设置auto margin之后项目的align-self和容器的justify-content将不起作用</u>

3. flex-basis和width优先级问题 flex-basic > flex-basis:auto > width