CSS学习第十一篇
- [1. 移动端常见布局---flex布局导读](#1. 移动端常见布局—flex布局导读)
- [2. flex布局体验](#2. flex布局体验)
- [3. flex布局原理](#3. flex布局原理)
- [4. flex设置主轴方向](#4. flex设置主轴方向)
- [5. justify-content设置主轴子元素排列](#5. justify-content设置主轴子元素排列)
- [6. flex-wrap子元素是否换行](#6. flex-wrap子元素是否换行)
- [7. align-items设置侧轴子元素排列（单行）](#7. align-items设置侧轴子元素排列（单行）)
- [8. align-content设置侧轴子元素排列（多行）](#8. align-content设置侧轴子元素排列（多行）)
- [9. flex-flow以及总结](#9. flex-flow以及总结)
- [10. 子项flex属性使用](#10. 子项flex属性使用)
- [11. align-self和order](#11. align-self和order)
1. 移动端常见布局---flex布局导读
目标：
目录：
2. flex布局体验
对比：
需实现效果如下：实操：
还可以把盒子放在中间（在父盒子里加代码）
还可以把子盒子平均成三等份（在子盒子里写flex:1;）
以上都是自适应的效果。
3. flex布局原理
flex布局原理：
总结：
4. flex设置主轴方向
给父元素设置的属性
主轴和侧轴
主轴是可变换的
实操：（1）主轴为横向翻转
（2）主轴为纵向
5. justify-content设置主轴子元素排列
设置主轴子元素排列
space-around
实操（一个盒子左右margin同）
space-between，先两边贴边再平分剩余空间
6. flex-wrap子元素是否换行
第四个盒子摆不下，换行。（浮动布局时期）
默认不换行
7. align-items设置侧轴子元素排列（单行）
现在只实现了某一轴居中，怎么样让主轴侧轴都居中呢？（即水平垂直居中）
效果图：
拉伸（子盒子不要给高度）
效果图：
如果主轴是y轴，则水平垂直居中如下（先竖着排列）
8. align-content设置侧轴子元素排列（多行）
上述学过的内容都无法实现下面的效果
只有多行能实现（这个属性在单行下是没有效果的）
两者的区别：
9. flex-flow以及总结
flex-flow：复合属性
相对于同时设置了flex-direction和flex-wrap
例如：
合并写法：
总结
10. 子项flex属性使用
子项属性
flex子项目占的份数
圣杯布局
代码如下：
1：1：1和1：2：1
11. align-self和order
align-self
order
实操：
第二个盒子在第一个盒子前面（越小越前）
