共计 2043 个字符，预计需要花费 6 分钟才能阅读完成。
flex 布局体验
传统布局和 Flex 布局
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能再挪动端很好的布局
Flex 布局
- 操作不便，布局极为简略，挪动端利用很宽泛
- PC 端浏览器反对状况较差
- IE 11 或更低版本，不反对或仅局部反对
倡议
1. 如果是 PC 端页面布局，咱们还是传统布局。2. 如果是挪动端或者不思考兼容性问题的 PC 端页面布局，咱们还是应用 flex 弹性布局
flex 布局原理
flex 是 flexible Box 的缩写，意为 ” 弹性布局 ”, 用来为盒状模型提供最大的灵活性
任何一个容器都能够指定为 flex 布局。
- 当咱们为父盒子设置了 flex 属性后，子元素的 float、clear 和 vertical-align 属性将生效
- 总结：flex 布局的原理总结就是：就是通过给父盒子增加 flex 属性，来管制子盒子的地位和排列形式。
flex 布局父项常见属性
（1）主轴和侧轴
在 flex 布局中，分为主轴和侧轴两个方向，同样的叫法有行和列、x 轴和 y 轴
* 默认主轴的方向是 x 轴方向，程度向右
* 默认侧轴的方向是 y 轴方向，垂直向下
（2）flex-direction 设置主轴的方向（即我的项目的排列形式）留神：主轴和侧轴是会变动的，就看 flex-direction 设置睡为主轴，剩下的就是侧轴。而咱们的子元素就是依据主轴来排列的。| 属性值 | 阐明 |
|---|---|
| row | 默认值从左到右（主轴为 x 轴） |
| row-reverse | 从右到左（主轴为 x 轴） |
| column | 从上到下（主轴为 y 轴） |
| row-reverse | 从下到上（主轴为 y 轴） |
（3）justify-content 设置主轴上子元素的排列形式
justify-content 属性定义了我的项目在主轴上的排列形式
留神：在设置 justify-content 属性前，肯定要先确定好主轴是哪个
| 属性值 | 阐明 |
|---|---|
| flex-start | 主轴为 x 轴 排列形式就是从左向右 主轴是 y 轴 排列形式就是从上向下 |
| flex-end | 主轴为 x 轴 排列形式就是从右向左 主轴是 y 轴 排列形式就是从下向上 |
| center | 在主轴居中对齐（主轴是 x 轴 程度居中 主轴是 y 轴 垂直居中） |
| space-around | 平分残余空间 |
| space-between | 先两边贴边 再平分残余空间（重要） |
（4）flex-wrap 设置子元素是否换行
默认状况下，子元素都是排在一条线上的（即 x 轴线或者 y 轴线）。然而有时候子元素太多，咱们心愿子元素进行换行，这时候就须要设置 flex-wrap 属性了
| 属性值 | 阐明 |
|---|---|
| nowrap | 默认值 不换行 |
| wrap | 换行 |
（5）align-items 设置侧轴上的子元素排列形式（单行）| 属性值 | 阐明 |
|---|---|
| flex-start | 默认值 从上到下 |
| flex-end | 从下到上 |
| center | 挤在一起居中（垂直居中） |
| stretch | 拉伸 |
（6）align-content 设置侧轴上的子元素的排列形式（多行）留神：align-content 属性只能用于子项呈现换行的状况下，在单行的状况下是没有成果的
| 属性值 | 阐明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴两头显示 |
| space-around | 子项在侧轴平分残余空间 |
| space-between | 子项在侧轴先散布在中间，再平分残余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
（7）align-content 和 align-items 区别
* align-items 实用于单行状况下，只有上对齐、下对齐、居中和 拉伸
* align-content 适应于换行（多行）的状况下（单行状况下有效），能够设置 上对齐、下对 齐、居中、拉伸以及平均分配残余空间等属性值。* 总结就是单行找 align-items 多行找 align-content（8）flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow:row wrap;
flex 布局子项常见属性
（1）flex 子项目占的份数
flex 属性定义子项目调配残余空间，用 flex 来示意占多少份数。.item {flex: <number>; /* default 0 */}（2）align-self 管制子项本人在侧轴的排列形式
align-self 属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性。默认值为 auto，示意继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。 span:nth-child(2) {
/* 设置本人在侧轴上的排列形式 */
align-self: flex-end;
}（3）order 属性定义子项的排列程序（前后程序）数值越小，排列越靠前，默认为 0。留神：和 z-index 不一样。.item {order: <number>;}flex 布局实现垂直程度居中（单行）
本文的实战我的项目地址：
https://github.com/dabaoRain/…
本文文档和实战我的项目都是从 https://www.bilibili.com/vide… 该视频中学习的，在此作为笔记，分享给大家，心愿对大家有所帮忙。
正文完