Flex

MDN-flex

flex 布局与传统布局

flex 布局

1. 操作方便，布局极为简单，移动端应用很广泛
2. PC 端浏览器支持情况较差
3. IE11 或者更低版本，不支持或仅部分支持

传统布局

1. 兼容性好
2. 布局繁琐
3. 局限性，不能在移动端很好的布局

   建议:

   1. 如果是 PC 端页面布局，我们还是使用传统布局
   2. 如果是移动端或者不考虑兼容性问题的 PC 端页面布局，我们还是使用 flex 布局

flex 布局原理

1. flex 是指 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局
2. 采用 Flex 布局的元素，称为 Flex 容器（flex container）,简称“容器”。它的所有容器成员，称为 Flex 项目（flex item）,简称“项目”。

   注意：当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical 属性将失效

flex 布局父项常见属性

flex-direction设置主轴方向(即项目的排列方向)

属性值	说明	备注
row	从左到右	默认值
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

注意：主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，则剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

主轴与侧轴

655b0713b2524dda96c47c7a1f43dbfd

1. 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴与 y 轴
2. 默认主轴的方向就是 x 轴方向，水平向右
3. 默认侧轴饿方向就是 y 轴方向，水平向下

justify-content设置主轴上的子元素的排列方式

属性值	说明	备注
flex-start	从头部开始 如果主轴是 x 轴，则从左到右	默认值
flex-end	从尾部开始排列
center	在主轴居中对齐（如果诸侯是 x 轴则 水平居中）
space-around	平分剩余空间
space-between	先两边贴边 在平分剩余空间

注意：使用这个属性之前一定要确定好主轴是哪一个

flex-wrap设置子元素是否换行

属性值	说明	备注
nowarp	不换行	默认值
warp	换行

默认情况下，项目都排在一条线（又称“轴线”）上。flex-wrap 属性定义，flex 布局中默认是不换行的。

align-items设置侧轴上的子元素排列方式（单行）

属性值	说明	备注
flex-start	从上到下	默认值
flex-end	从下到上
center	挤在一起居中（垂直居中））
stretch	拉伸	子盒子不能给高度，要不然没有效果

注意：在多行是没有效果的

align-content设置侧轴上的子元素的排列方式（多行）

属性值	说明	备注
flex-start	在侧轴的头部开始排列	默认值
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，在平分剩余空间
stretch	设置子项元素高度平分父元素高度

注意：在单行是没有效果的

单行和多行的区别

ae4f44793b894e9e99a7dc1a1a26c4d0

flex-flow 复合属性，相当于同时设置了flex-direction和flex-wrap

flex 布局子项常见属性

flex（flex 属性定义子项目分配剩余空间）

1. 用 flex 表示占多少份数 默认是0
   • 所有子元素设置为flex:1,表示平分剩余空间
   • 假如有两个子元素，一个设置为flex:1,另一个设置flex:2。flex:1 表示占 1/3,flex:3 表示占 2/3。以此类推
2. flex 后面的值也可是%，相对于父级来说
   • 假如有两个子元素，一个设置为flex:30%,另一个设置flex:70%。flex:30%表示占 30%,flex:70%表示占 70%。以此类推

align-self（控制子项自己在侧轴的排列方式）

2. align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性，如果没有父元素，则等同于 strech

<!DOCTYPE html>
<html lang="zh-CN">
  <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>Document</title>
  </head>
  <body>
    <section>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </section>
  </body>
</html>

section {
  display: flex;
  width: 60%;
  height: 420px;
  margin: 0 auto;
  background-color: azure;
  border: 1px solid salmon;
  align-items: center;
}

section span {
  height: 200px;
  background-color: aquamarine;
  border: 1px solid salmon;
}

section span:nth-child(1) {
  width: 100px;
  height: 200px;
  align-self: flex-start;
}

section span:nth-child(3) {
  width: 100px;
  height: 200px;
  align-self: flex-end;
}

section span:nth-child(2) {
  flex: 1;
}

order

1. 属性定义子项的排列顺序（前后顺序）

2. 数值越小，排列越靠前，默认为 0

注意：和 z-index 不一样

<!DOCTYPE html>
<html lang="zh-CN">
  <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>Document</title>
  </head>
  <body>
    <section>
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </section>
  </body>
</html>

section {
  display: flex;
  width: 60%;
  height: 420px;
  margin: 0 auto;
  background-color: azure;
  border: 1px solid salmon;
  align-items: center;
}

section span {
  height: 200px;
  background-color: aquamarine;
  border: 1px solid salmon;
}

section span:nth-child(1) {
  width: 100px;
  height: 200px;
  align-self: flex-start;
}

section span:nth-child(3) {
  width: 100px;
  height: 200px;
  align-self: flex-end;
}

section span:nth-child(2) {
  /* 默认是0, -1比1小，所以在前面 */
  order: -1;
  flex: 1;
}