弹性盒子的属性和用法

1.父容器可以指定为弹性盒子布局。使用 display: flex; 将一个块级元素设置为弹性盒子容器，就能使用弹性盒子布局。

2.子元素可以根据需求自由伸缩，首先弹性盒子容器会把它们所有的子元素作为一个整体来处理，并根据不同的属性来调整这个整体内部的子元素的尺寸。

3.弹性盒子容器内的子元素可沿主轴（main axis）和交叉轴（cross axis）方向进行排列。主轴默认是水平方向，即 left 和 right，交叉轴默认是垂直方向，即 top 和 bottom。

4.弹性盒子容器内的子元素拥有各自不同的对齐方式。可通过 justify-content 和 align-items 等属性来调整子元素的对齐方式。

5.同时可以使用 flex-direction, flex-wrap 和 flex-flow 等属性来更细致地控制布局。

6.可以通过 order, flex-grow, flex-shrink, flex-basis 等属性单独控制每个子元素的布局样式。

弹性盒子布局可以使开发者更方便地控制页面的布局，提高页面排版的灵活性和效率。

1. 指定一个块级元素为弹性容器

display: flex;

2. 设置子元素的排列方向，row表示水平方向，column表示垂直方向

flex-direction: row/column;

3.设置弹性容器内子元素在主轴上的对齐方式。flex-start表示靠左/靠上，center表示居中对齐，flex-end表示靠右/靠下，space-between 表示两端对齐并且子元素之间平均分配空间，space-around 表示每个子元素两侧都留出相等的空白空间。

justify-content: flex-start/center/flex-end/space-between/space-around;

4.设置弹性容器内子元素在交叉轴上的对齐方式。stretch 表示拉伸填满剩余空间，flex-start表示顶部对齐，center表示居中对齐，flex-end表示底部对齐，baseline表示文本基线对齐
align-items: stretch/flex-start/center/flex-end/baseline;
5.设置子元素是否允许换行。nowrap表示不换行，wrap表示自动换行。

flex-wrap: nowrap/wrap;

6.同时设置 flex-direction 和 flex-wrap。

flex-flow: <flex-direction> <flex-wrap>;

7.当有多行子元素时，设置它们在交叉轴上的对齐方式。flex-start表示顶部对齐，center表示居中对齐，flex-end表示底部对齐，space-between 表示两端对齐并且行与行之间平均分配空间，space-around 表示每行两侧都留出相等的空白空间，stretch表示拉伸填满整个交叉轴。

align-content: flex-start/center/flex-end/space-between/space-around/stretc;

8.设置子元素的排列顺序，数值越小越靠前

order: <integer>;

9.设置子元素的放大比例，默认为0，表示不放大。

flex-grow: <number>;

10.设置子元素的缩小比例，默认为1，表示它们可以缩小到最小尺寸。

flex-shrink: <number>;

11.指定在分配多余空间之前，子元素在主轴方向上所占用的空间，默认为auto，即由元素内容决定。

flex-basis: <length>|auto;

12.以上 flex-grow、flex-shrink 和 flex-basis 三个属性的缩写，第一个值表示 flex-grow，第二个值表示 flex-shrink，第三个值表示 flex-basis。

flex: none|<positive-number> <positive-number>|initial|inherit;