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