flex布局需要知道些什么

• 默认情况下，项目都排在一条线（又称“轴线”）上

• flex-wrap属性定义，flex布局中默认是不换行的

| 属性值 | 解释说明 |

| — | — |

| nowrap | 默认值，不换行 |

| wrap | 换行 |

.box {

  display: flex;

  ...

  flex-wrap: wrap;

}

align-items — 设置侧轴单行子项目对齐

===================================================================================

• 该属性是控制子项在侧轴（默认是y轴）上的排列方式

• 在子项为单项（单行）的时候使用

| 属性值 | 解释说明 |

| — | — |

| flex-start | 默认值，从上到下 |

| flex-end | 从下到上 |

| center | 挤在一起居中（垂直居中） |

| stretch | 拉伸 |

.box {

  display: flex;

  ...

  align-items: center;

}

align-content — 设置侧轴多行子项目对齐

=====================================================================================

• 设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况，在单行下是没有效果的

| 属性值 | 解释说明 |

| — | — |

| flex-start | 在侧轴的头部开始排列 |

| flex-end | 在侧轴的尾部开始排列 |

| center | 在侧轴的中间显示 |

| stretch-around | 子项在侧轴平分剩余空间 |

| stretch-between | 子项在侧轴先分布在两头，在平分剩余空间 |

| stretch | 设置子项元素高度平分父元素高度 |

.box {

  display: flex;

  ...

  align-content: stretch;

}

align-content和align-items区别

---

• align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸

• align-content适应于换行（多行）的情况下（单行对齐无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值

• 总结就是单行找align-items多行找align-content

flex-flow — 复合属性

==========================================================================

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

.box {

  display: flex;

  ...

  flex-flow：row nowrap;

}

flex设置子项的份数

=====================================================================

• flex属性定义子项目分配父盒子的剩余空间，用flex来表示占多少份数

• 属性值为数字，数字为1，表示占总份数中的1份，默认值为0

.item {

  flex:1;

}

子项的 align-self 和 order 属性

===================================================================================

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

---

• align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

• 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

span:nth-child(2) {

  align-self: flex-end;

}

order属性定义项目的排列顺序

---

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

• 注意：和z-index不一样

.item {

  oredr: -1;

}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zWtqyATB-1604920584915)(])

最后

在面试前我花了三个月时间刷了很多大厂面试题，最近做了一个整理并分类，主要内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

• HTML5新特性，语义化

• 浏览器的标准模式和怪异模式

• xhtml和html的区别

• 使用data-的好处

• meta标签

• canvas

• HTML废弃的标签

• IE6 bug，和一些定位写法

• css js放置位置和原因

• 什么是渐进式渲染

• html模板语言

• meta viewport原理