HTML 弹性盒子

1.弹性盒子

​ 概念：是一种新的布局模式，他让元素有能力控制子元素的排列

语法：display:flex | inline-flex;设置为弹性盒子

​ inline-flex是行内的弹性盒子，容器和宽度有内容决定

专业术语：

​ 容器：被设置成弹性盒子的元素

​ 项目：容器的子元素

​ 主轴：子元素的排列方向

​ 侧轴：与主轴垂直的轴，叫交叉轴

2.容器身上的属性

​ 1.设置主轴的方向

flex-direction : row   |  column  |  row-reverse  |  column-reverse;

2.设置项目在主轴上的排列方式

	justify-content:flex-start | flex-end |center | space-around | space-between | space-evenly

​ space-around间隔在周围

​ space-between间隔在之间

​ space-evenly均分间隔

3.设置项目是否换行

		flex-warp：nowarp | warp | warp-reverse

4.项目在侧轴对齐的方式

align-items:stretch 拉伸 | flex-start | flex-end | center | baseline 基线

​ stretch在项目有高度的时候，项目不会有拉伸效果

5.设置多根轴线的排列方式

align-content:stretch  | flex-start | flex-end | center | space-around | space-between | space-evenly

6.设置主轴方向和是否换行的复合属性

flex-flow: flex-direction flex-wrap;

2.项目身上的属性

1.项目是否会缩小

	flex-shrink：*；1会缩小，0不缩小；

如果值为其他数，就会将需要缩小的值，除以所有项目的flex-shrink值的和，得到每一份的值，然后让该项目缩小指定的份数的大小

2.是否放大

flex-grow：*；0会放大，1不会放大。

3.设置项目基准尺寸

flex-basis：auto | *px；

4.放缩的复合属性

​

flex：flex-grow flex-shrink flex-basis；

注意：flex：1；1 1 auto；

5.项目的排序

​ order：数字，元素默认的值是0，排序是从小到大排列

6.设置项目单独的对齐方式

align-self:stretch 拉伸 | flex-start | flex-end | center | baseline 基线