初见FLEX

photo.jpg

FLEX布局

一种新的布局方式，flex布局

1. flex布局与方向无关
2. flex布局可以实现空间自动分配、自动对齐。
3. flex适用于简单的线性布局。

flex container:

属性	作用
flex-direction	方向
flex-wrap	换行
flex-flow	上面两个简写
justify-content	主轴方向对齐方式 （center，space-between，space-around，flex-end，flex-start）
align-items	侧轴对齐方式 （strech，flex-start，flex-end，center ）
align-content	多行、列内容对齐方式

flex container

flex item:

属性	作用
flex-grow	增长比例
flex-shrink	收缩比例
flex-basis	默认大小
flex	上面三个缩写
order	顺序（代替双飞翼）
slign-self	自身的对齐方式

flex item

1. flex 实现手机布局
2. 产品列表
3. pc页面布局
4. 完美居中