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… 该视频中学习的，在此作为笔记，分享给大家，心愿对大家有所帮忙。
发表回复