module4-03-flex布局基础

flex布局

一、flex布局基础

1.1 传统布局与flex布局

（1）传统布局

• 兼容性好

• 布局繁琐

• 局限性，不能在移动端又很好的布局

（2）flex布局

• 操作方便，布局急为简单，移动端应用很广泛

• PC端浏览器支持情况较差

• IE11或耕地版本，不支持或仅部分支持

• 不用清除浮动等

（3）布局选择建议

• 如果是PC端页面布局，使用传统布局

• 如果是移动端或不考虑兼容性问题的PC端页面布局，使用弹性布局

1.2 flex布局原理

• 父盒子设置了flex布局以后，子元素的float、clear、vertical-align的属性都会失效

• 名称：伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

• 父：Flex容器；子：Flex项目

总结

• 就是通过给父盒子添加flex属性，来控制子盒子的位置和排序方式

二、flex的使用

2.1 父项常见属性

属性	描述
flex-direction	设置主轴的方向
justify-content	设置主轴上的子元素排列方式
flex-wrap	设置子元素是否换行
align-content	设置侧轴上的子元素的排列方式（多行）
align-items	设置侧轴上的子元素排列方式（单行）
flex-flow	符合属性，相当于同时设置了flex-direction和flex-wrap

2.1.1 flex-direction 设置主轴方向

主轴与侧轴（justify与align）

• 默认主轴就是x轴方向，水平向右

• 默认侧手就是y轴方向，垂直向下

• flex-direction设置谁为主轴，另外一个就是侧轴

属性值	解释说明
row	默认值从左向右
row-reverse	从右向左
column	从上到下
column-reverse	从下到上

2.1.2 justify-content 主轴上子元素排列方式（重点）

• justify-content 属性定义了项目在主轴上的对齐方式

属性值	解释说明
flex-start	默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平方剩余空间
space-between	先两边贴边 再平分剩余控件（重要）

 

2.1.3 flex-wrap 设置子元素是否换行

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

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

属性值	解释说明
nowrap	默认值，不换行（超过的话会强行压缩子元素）
wrap	换行

2.1.4 align-items 侧轴上子元素排列方式（单行）

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

• 在子项为单项（单行）的时候使用，多行不生效

属性值	解释说明
flex-start	默认值 从上到下
flex-end	从下到上
centet	挤在一起居中（垂直居中）
stretch	拉伸（在侧轴height/width没设置的时候设置了这个属性会把height/width拉伸至父元素最大） 如果设置了那个方向的值，会默认拍到flex-start但是没有宽度/长度变化（有margin会计算在内）

2.1.5 align-content 侧轴上子元素排列方式

• 设置子项在侧轴上的排列方式，用于子项出现换行的情况（即多行），对单行也有效果

• 属性值：flex-start，flex-end，center，space-around，space-between，stretch（没有高度的前提下才生效）

• 不设置但出现多行的话，会默认平均分配等值高度（父容器有高度且大于子撑开高度的前提下）

• 多行的情况下只设置align-items是对于每一行分配的高度的区域进行align-items的排列规则

  • 比如align-items: center;就像align-content: around一样

align-content和align-items的区别

• align-items没有space-around和space-between

• 只有单行的时候即全部高度都视为一行（align-conten为flex-end会生效）

2.1.6 flex-flow 复合属性

• flex-direction和flex-wrap的值卸载一起

2.2 子项常见属性

• flex 子项目占的份数

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

• order属性定义子项的排列顺序（前后顺序）

2.2.1 flex属性

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

• 可用来做圣杯：

  • 左右固定，父盒子display：flex；中间子盒子flex：1；

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

• align-self 是子项设置的覆盖align-items的属性，即使设置了该值原本位置也会保留，也就表示只作用于一条轴

• 默认值为auto表示继承父元素的align-items

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

• 默认为0

• 数字越小越靠前，数字越大越靠后