flex布局

flex布局

小黄鸭代码调试法

在电脑旁放一只小黄鸭,遇到问题时,把问题和它说一遍.很多时候就能解决了

你遇到了个bug.去问别人,提问时,把你的目的,代码思路,流程和对方说了一遍 -- 把内容过了一遍 -- 旁观者清,换个角度阐释/思考项目

你程序出bug/功能未实现
	小黄鸭,我要XXX, 但是在实现XX功能时, xxx了. 出bug了

遇到bug了:
	1.检查, 是否拼写有问题,缩进有问题
	2.翻译报错信息
	3.百度搜索报错信息
	4.整理清楚提问思路,询问他人

阿里图标

免费将图标以字体的形式加载到网页里

使用步骤:
	1.进入阿里图标官网 https://www.iconfont.cn/
	2.注册/登录
	3.选择图标 加入到购物车
	4.下载代码
	5.写代码

flex布局(弹性盒模型)

http://c.biancheng.net/css3/flex.html

flex是当前比较主流的布局方式 -- 它布局很方便.可以取代float(float不是为了做布局而生)

flex布局原理:
	通过两条轴,把网页分割为一行行/一列列
	flex主轴是从左往右,副轴是从上往下. 默认为左右水平布局

flex的使用三要素:
	1.主轴的方向 (是要左右水平布局 / 上下垂直布局)
	2.主轴元素对齐方式
	3.副轴元素对齐方式

flex的使用:
	display: flex;

主轴方向(决定左右/上下布局) flex-direction
	row;   行,默认, 从左往右
	column;  列,从上往下
	row-reverse;  行反转,从右往左
	column-reverse;  列反转,从下往上

主轴对齐方式: justify-content
	flex-start;  靠起点
	flex-end;  靠终点
	center;  居中
	space-around;  均分
	space-between;  两端

副轴对齐方式: align-items
	flex-start;  靠起点
	flex-end;  靠终点
	center;  居中

内容换行: flex-wrap
	no-wrap;  缩放不换行
	wrap; 换行

内容顺序: order
	调整flex里元素的顺序,值越小越靠前