弹性盒子

弹性盒子叫flex，如何才能创建一个弹性盒子，需要使用display: flex;

兼容性

---

兼容性

 如果我们的项目需要兼容到IE低版本，则不能使用flex

特点

---

 flex可以直接替代浮动实现网页布局，同时比浮动更简单，更容易，但是，刚开始学习，会觉得属性比较多，难以掌握

内部规则

---

我们称添加了flex属性的元素为容器，容器内部的子元素叫项目

 

1. 容器有两个方向的轴，横轴和纵轴，默认横轴为主轴

2. 每个方向的轴都有开始和结束两个点，flex-start 和 flex-end

3. 横轴开始点在左，结束点在右

4. 纵轴开始点在上，结束点在下

5. 容器内部的项目永远都会沿主轴排列 从 flex-start 到 flex-end

6. 主轴可以切换，flex-start 和 flex-end 可以切换

7. 只要变成项目，我们就可以把他当成块元素对待

弹性盒子，就是通过改变容器中主副轴和方向，实现项目的不同排列方式

弹性盒子属性

---

生成弹性盒子

我们可以给元素添加对应属性，生成弹性盒子

选择器 {
  display: flex;
}

 在最新版本的chrome中，看到下方这个东西，表示这个元素变成了flex

改变主轴方向

flex-direction

• row 默认值
• column

如果我们要把主轴切换为纵轴，则使用该属性进行修改

选择器 {
  display: flex;
  flex-direction: row-reverse;
}

设置项目是否换行

默认情况，项目过多，最大宽度超出容器最大宽度，会自动被压缩，如果我们想要实现换行的效果，需要添加flex-wrap属性

• wrap
• nowrap 默认值
• wrap-reverse

选择器 {
  display: flex;
  flex-wrap: wrap;
} 

复合属性 direction 和 wrap

flex-flow是 flex-direction 和 flex-wrap 的复合属性

选择器 {
  display: flex;
  flex-flow: direction的属性值 wrap的属性值；
}

项目在主轴上的排列方式

justify-content

• center 常用 居中

• flex-start 默认值

• flex-end end排列

• space-between 左右贴边，中间等分

• space-around 所有元素左右两边右相同空间

• space-evenly 所有元素间距相同

 选择器 {
  display: flex;
  justify-content: center;
}

项目在副轴上的排列方式

align-items

• center 居中

• flex-start 开始

• flex-end 结束

• stretch 拉伸默认值

项目属性

---

添加到容器子元素上的属性

align-self

可以覆盖添加在容器上的 align-items 属性，使单个项目在副轴上有自己的排列方式，属性值和 align-items 一致

• flex-start
• flex-end
• center
• stretch

flex-grow

默认情况下，项目在主轴上所占的距离是根据 width 和 height 实现的，我们可以通过 flex-grow 实现 宽 或者 高 的自动放大

• 0 默认值
• 其他数字

并非数字越大，放大的比例越大，而是按比例进行计算：默认宽度 + 剩余空间 / 总的grow值 * 单个项目的grow值

一般情况下，我们使用该操做，只是为了把元素自动放大，所以最常用的属性为 flex-grow: 1

项目在一行上必须有剩余空间

flex-shrink

默认情况下，一行项目总的距离大于主轴上容器的距离，项目会被自动压缩。

• 1 默认值
• 其他数字

最常用的就是 flex-shrink: 0；

默认宽度 - 超出空间 / 总的shrink值 * 单个项目的shrink值

项目在一行上如果超出容器大小，才会触发压缩操做

flex-basis

定义项目在主轴上所占的距离

• xxxpx
• xx%
• auto 默认值 跟随width height走

优先级要高于宽高

flex

flex是上面三个属性的复合属性

flex: 0 1 auto

选择器 {
  flex: flex-grow flex-shrink flex-basis;
}

order

进行项目排序，默认值为 0， 值越大，越靠后，能有负值，值越小，越靠前

这个排序不会印象到布局，只会影响顺序

选择器 {
  order: 1;
}