flex布局

1. 传统布局和flex布局对比

---

1.1传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

1.2 flex布局

• 操作方便，布局极其简单，移动端使用比较广泛
• pc端浏览器支持情况比较差
• IE11或更低版本不支持flex或仅支持部分

1.3 建议

• 如果是pc端页面布局，还是采用传统方式
• 如果是移动端或者是不考虑兼容的pc则采用flex

---

2. flex布局原理

flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局

采用 Flex 布局的元素，称为 Flex 容器（flexcontainer），简称"容器"。它的所有子元素自动成为，称为 Flex 项目（flexitem），简称"项目"。

语法：display: flex;

注意：

• 是写在父盒子上，来控制子盒子的位置和排列方式
• 当给父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效

---

3. 父项常见属性

属性都是写在父盒子上

---

3.1 主轴方向

在 flex 布局中，分为主轴和侧轴两个方向，同样的叫法有：行和列、x 轴和y 轴

• 主轴：默认方向为 x 轴，默认水平向右
• 侧轴：默认方向为 y 轴，默认垂直向下

语法：flex-direction: 属性;

• row：设置主轴按行从左到右排列（默认）
• row-reverse：设置主轴按行从右到左排列
• column：设置主轴按列从上到下排列
• column-reverse：设置主轴按列从下到上排列

注意：

• 子元素是跟着主轴来排列的
• 设定主轴的方向，则另一方向是侧轴

---

3.2 主轴上子元素排列方式

语法：justify-content: 属性;

• flex-start：左对齐（默认）
• flex-end：右对齐
• center：居中
• space-around：平分剩余空间
• space-between：先两边贴边再平分剩余空间

注意：如果主轴为 y 轴，可以看做是顺时针旋转了90度的操作

---

3.3 设置是否换行

默认情况下，子元素都在主轴一条线上排列

语法：flex-wrap: 属性;

• nowrap：不换行（默认）
• wrap：换行

注意：如果父级装不开子元素，则平均缩小子元素轴向上的尺寸

---

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

在子元素为单行的时候使用

语法：align-items: 属性;

• flex-start：居上
• flex-end：居下
• center：居中
• stretch：侧轴大小拉伸至100%（子元素不可设高度）

---

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

只能用于子元素出现换行的情况（多行），在单行下是没有效果的

语法：align-content: 属性;

• flex-start：居上
• flex-end：居下
• center：居中
• space-around：平分剩余空间
• space-between：先分布在两头，再平分剩余空间
• stretch：子元素底部平分剩余空间

---

3.6 设定主轴与换行简写

语法：flex-flow:主轴方向 是否换行;

注意：如果省略某个属性则按默认值设定

---

4. flex布局子项常见属性

4.1 flex 属性

定义子项目分配剩余空间占多少份数，可设置百分比（相对于父级来说的）

语法：flex: <number>（默认 0）

---

4.2 单个子项在侧轴上的排列方式

可以设置单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性

语法：align-self: 属性;

• flex-start：居上
• flex-end：居下
• center：居中

默认：Auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

---

4.3 order 定义子项的排列顺序

默认按照结构排序，设定后可更改排列顺序，数值越小，排列越靠前

语法：order: <number>;（默认 0）

---

5. 背景色线性渐变

语法：background: -webkit-linear-gradient(方位, 颜色1, 颜色2);

方位：颜色1所在的位置，使用方位名词（如果有两个词用空格隔开，例左上：left top）

注意：必须加浏览器私有前缀使用

---