文章标题

h5c3内容06

伸缩布局

主轴 侧轴
默认主轴从左向右，侧轴默认从上到下
子盒子的排列方向 是按照主轴的方向
伸缩布局的属性: dispaly:flex;

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认主轴从左向右，侧轴默认从上到下
主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

1、必要元素：

a、指定一个盒子为伸缩盒子 display: flex
b、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
c、明确主侧轴及方向
d、可互换主侧轴，也可改变方向
2、各属性详解

a、flex-direction调整主轴方向（默认为水平方向）
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置
row 水平方向
Row-reverse反转
column 垂直方向
column-reverse 反转列

b、justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
flex-start、 起点对齐
flex-end、 终点对齐
center 中间对齐
space-around、 子盒子自动平分父盒子的空间
space-between 两端对齐其余平分

c、flex控制子项目的缩放比例
不指定flex 属性，则不参与分配

d、align-items设置或检索弹性盒子元素在侧轴（竖轴）方向上的对齐方式。
flex-start、 起点对齐
flex-end、 终点对齐
center 中间对齐
Stretch: 拉伸
E、flex-wrap 控制是否换行
Wrap：换行
Nowrap：不换行

flex:比值(加给子元素)
不参与划分的盒子,不需要设置flex即可

justify-content：

主轴方向对齐,可以调整元素在主轴方向上的对齐方式,包括flex-start、flex-end、center、space-around、space-between几种方式

flex：

控制子元素的伸缩比例

flex-direction：

调整主轴方向(默认为水平方向) 包括row、column、column-reverse、row-reverse

flex-wrap：

控制是否换行，包括wrap、nowrap

align-content：

堆栈排列,可对应用flex-wrap:wrap后产生的换行进行控制，包括flex-start、flex-end、center、space-between、space-around、stretch

align-items：

调整侧轴方向对齐方式,包括flex-start、flex-end、center、stretch

align-self：

同align-items可覆盖父元素设置的align-items，包括flex-start、flex-end、center、stretch

order：

控制子元素的顺序，值大的靠后值小的靠前

onmousewheel鼠标滚轮事件

部分demo：https://github.com/Big-stone/Flexbox