module4-03-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
-
