js---弹性布局

弹性布局flex

弹性布局，即为盒装模型提供最大的灵活性

任何一个容器都可以使用弹性布局。

dlsplay:flex;

给这个元素添加display：flex属性之后，把该元素容器当作父元素（flex container），父元素的子元素都是该容器的成员，称为这个容器的项目（flex item）。

弹性容器中的子项目都是正常渲染的，而弹性布局，顾名思义，影响的只是子元素在容器中的布局方式。

---

display的值

初步了解

display的值	解释
box	弹性伸缩盒
inline-box	内联块级弹性伸缩盒
flexbox	弹性伸缩盒
flex	弹性伸缩盒
inline-flex	内联块级弹性伸缩盒

---

轴（Axis）

容器里会分为两个轴，一个是主轴（水平方向），一个是垂直于主轴的交叉轴 （垂直方向）

---

父元素容器的属性

属性	值	解释
flex-direction	row、row-reverse、column、column-reverse	主轴方向设置
justify-content	flex-start、flex-end、center、space-between、space-evenly、space-around	flex item在主轴上的对齐方式
flex-wrap	nowrap、warp、wrap-reverse	设置flex container 是单行还是多行
align-content	stretch、flex-start、flex-end、center、space-between、space-evently、space-around	设置多行的flex items 在cross axis的对齐方式
flex-flow		flex-direction和flex-flow的简写
align-items	normal、stretch、flex-satrt、flex-end、center、baseline	flex items在交叉轴上的对齐方式

flex item项目属性

属性	值	解释
order	任意整数	flex items的排布顺序，值越小越排前
align-self	auto、stretch、flex-start、flex-end、center、baseline	覆盖flex container 设置的align-items
flex-grow	任意的非负数	flex items的扩展
flex-shrink	任意的非负数	flex items的伸缩
flex-basis	auto	设置flex items 在主轴方向上的base size
flex	0 1 auto	flex-grow 、 flex-shink、flex-basis的简写