7.flex布局

flex布局

1.小黄鸭代码调试法

2.阿里图标

3.flex布局（弹性和模型）

flex是当前较为主流的布局方式-->它布局起来更加方便，可以去掉float-->float一开始不是用来布局的
	用布局的元素称为flex的容器，它里的内容称为容器项目/flex
	项目：父级：容器  子集：项目
	flex布局原理：就是通过两条轴，把网页分割为一行行/一列列
	flex主轴是从左向右，flex副轴是从上到下，默认情况是左右水平布局。
	flex三要素：
		1.主轴的方向（你是要左右水平布局/上下垂直布局）
		2.主轴的对齐方式
		3.副轴的对齐方式
	flex的使用方法：
		display：flex;
	flex样式说明：
		设置主轴方向（决定左右/上下布局）：flex-direction
            语法：flex-direction:row/colume/row-reverse/column-reverse
            row:行，默认属性，从左到右
            column:列，从上往下
            row-reversse：行反转，从右到左
            column-reverse：列反转，从下到上
         设置主轴对齐方式：justify-content：start/end/space-around/space-between
         	flex-start:默认，按照起点对齐，左/上
         	flex-end：按照终点对齐
         	space-around：均分对齐
         	space-between：两端对齐
         设置副轴对齐方式：align-items:center/flex-start/flex-end
         	center:居中
         	flex-start:靠起点
         	flex-end：靠终点
         设置换行，flex自带缩放功能，如果你不想要可以设置：flex-wrap属性：
         	no-wrap:默认，不换行
         	wrap：换行
         flex项目属性：
         	order：项目的顺序，数值越小，排序越靠前，默认是0；一定要是数值，不是像素。
         	

4.百度壁纸背景

5.拓展