一，今日学习内容：
1. 流式布局
概念
流式布局就是百分比布局，也叫做非固定像素布局
通过对盒子的宽度进行百分比设置来达到根据屏幕的宽度进行响应伸缩的目的，不受固定像素的限制
2.Flex布局
传统布局和flex布局的对比
传统布局：
兼容性好、布局繁琐、局限性（不能在移动端进行很好的布局）
Flex布局
操作方便，布局简单，移动端应用广泛
PC端有一定的兼容问题，但是目前大部分PC端浏览器也是支持flex布局的
IE11以下不支持flex
建议
如果是PC端页面布局，最好是采用传统方式
如果是移动端或者不考虑PC端兼容性的，都可以采用flex进行布局
Flex布局原理
flex意思是弹性布局，任何一个盒子都可以指定为flex
当我们给父级盒子指定了flex布局后，子元素里面的float、clear和vertical-align属性都将失效。
采用Flex布局的元素，称为Flex容器（flex container）简称“容器”，它的所有的子元素自动成为容器成员，叫做Flex项目（flex item），简称“项目”。
Flex布局父项常见属性
flex-direction：设置主轴的方向
在flex布局中分为X轴和Y轴，默认的主轴是X轴，也就是水平向右，也可以将主轴设置为Y轴，也就是垂直向下
注意：
主轴和侧轴是会变化的，当设置X轴是主轴，那么Y轴就是侧轴，反之亦然。
属性值
row：沿X轴从左到右进行排列（默认值）
row-reverse：沿X轴从右到左进行排列
column：沿Y轴从上到下进行排列
column-reverse：沿Y轴从下到上进行排列
justify-content:设置主轴上的子元素的排列方式
属性：
flex-start:
默认值，从头部开始，如果主轴是X就是从左到右
flex-end:
沿主轴的尾部开始进行排列
center：
在主轴上进行居中对齐（如果主轴是X就代表水平居中）
space-around:
所有子项平分剩余空间
space-between：
先让两侧的盒子贴边，然后再平分剩余的空间
例
flex-wrap：设置子元素是否换行
默认情况下，项目都在一条线上，不进行换行操作。
属性值
nowrap：不换行（默认值）
wrap：换行
例
align-items：设置侧轴上的子元素的排列方式（单行）
注意：要在侧轴上子项是单行的时候使用
属性值：
flex-strat：从头开始
flex-end：从尾部开始
center：居中显示
stretch：拉伸
例
align-content:设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式，只能用于多行子项的情况（子项换行时），单行是没有效果的
属性值
flex-strat：从头开始
flex-end：从尾部开始
center：居中显示
space-around：子项在侧轴平分剩余空间
space-between：子项在侧轴先两侧贴边，然后再平分剩余空间
stretch：拉伸
例
align-items和align-content的区别
align-items适用于单行情况下，只有上对齐，下对齐，居中和拉伸
align-content适用于多行的情况下（单行无效），可以设置上对齐、下对齐、居中、拉伸以及平分剩余等属性
单行找align-items
多行找align-content
flex-flow复合属性
是flex-direction和flex-wrap的复合属性
例：可以同时设置主轴方向和是否换行
Flex布局子项常见属性
align-self: 控制子项自己在侧轴上的排列方式
默认值是auto，表示继承父元素的algin-items属性，如果自己有align-self，就用自己的属性
属性值：
flex-strat：从头开始
flex-end：从尾部开始
center：居中显示
stretch：拉伸
order属性定义项目的排列顺序
数值越小排位越靠前，默认为0
注意点：不要和z-index混淆
例
flex来控制子项占的份数
例子：
注意：
一个盒子可以同时是容器和项目（套娃）
如果一个子项有自己的宽度高度，那么其他子项有flex:1; 就代表将剩余的部分进行平分。
|
